javascript用localStorage存储用户搜索词记录,并在搜索框下展显搜索词记录

//首先是storage的一封装
//storage.js文件

function storage(){
            
           
            //设置storage密钥
            this.ms="mystorage";
            
        }
		//以下为函数的原型方法
        //获得localStorage值
       storage.prototype.getLocal=function(key){
            //先检查设置的localStorage的密钥
            var mydata=localStorage.getItem(this.ms);
            if(!mydata)
            {
                return false;
            }
            //存在即转换为对象
            mydata=JSON.parse(mydata);
            //返回data对象中的key属性对应的值,可以是数组也可以是字符
            return mydata.data[key];
       };
       //设置localStorage的值
       storage.prototype.setLocal=function(key,value){
        //先返回我们设置的localStorage的密钥
            var mydata=localStorage.getItem(this.ms);
            if(!mydata)
            {
                //不存在即设置名称
                this.init();
                //然后再返回名称
                mydata=localStorage.getItem(this.ms);
            }
            //转换为对象
            mydata=JSON.parse(mydata);
            //将键与值赋值给data对象,注意这个value在后面是一个数组形式
            mydata.data[key]=value;
            localStorage.setItem(this.ms,JSON.stringify(mydata));
            return mydata.data;
       };
       storage.prototype.removeLocal=function(key)
       {
            //返回localStorage的密钥
            var mydata=localStorage.getItem(this.ms);
            if(!mydata)
            {
                return false;
            }
            mydata=JSON.parse(mydata);
            //删除对象中的属性
            delete mydata.data[key];
            localStorage.setItem(this.ms,JSON.stringify(mydata));
            return mydata.data;

       };

       storage.prototype.clearLocal=function(){
        //删除密钥
        localStorage.removeItem(this.ms);
       };
       storage.prototype.init=function(){
        //设置密钥
        localStorage.setItem(this.ms,'{"data":{}}');
       };

//前端实现搜索框及搜索词历史记录框

<html>
    <head>
        <meta http-equiv="Content-Type:text/html;charset=utf-8;"/>
        <title>测试搜索历史词</title>
        <script type="text/javascript" src="storage.js"></script>
        <style type="text/css">
            #history
            {
                width:230px;
                height:120px;
                position:absolute;
                top:30px;
                left:10px;
                border:1px solid #ccc;
                margin-top:10px;
                display:none;
                z-index:20;
                
            }
            li 
            {
                list-style:none;  
                margin-left:10px;  
                padding-top:1px;    
            }
            a
            {
                text-decoration:none;
                color:black;
                font-size:14px;
            }    

        </style>
    </head>
    <body>
        <input type="text" value="" size="30" />&emsp;<input type="button" value="搜索"/>

        <div id="history"></div>
         <script type="text/javascript">
            var btn=document.getElementsByTagName('input');
            var div=document.getElementById('history');
            //创建5个li元素,插入div元素中
            for(var j=0;j<5;j++)
            {
                var li=document.createElement("li");
                div.appendChild(li);
            }
            //然后再获取这些li元素合集
            var lis=document.getElementsByTagName("li");
            //创建storage对象
            var f=new storage();
            //按钮事件
            btn[1].onclick=function(){
            	//检查是否已经设置了keywords
                var data=f.getLocal("keywords");
                //获取input框中的值
                var value=btn[0].value;
                //如果没有设置,则设置data为一个数组
                if(!data)
                {
                    var data=[];
                    //数组为10个值,如果超过10个,则弹出第1个,方便添加接下来的词
                }else if(data.length===10)
                {
                    data.shift();
                }
                //如果值存在
                if(value)
                {
                	//在data数组中没有找到这个值,则将这个搜索词加入data数组中
                    if(data.indexOf(value)<0)
                    {
                        data.push(value);
                        //将data数组包含的词以数组形式添加到以keywords为对象当中去
                        //也就是设置keywords对象的值
                        f.setLocal("keywords",data);
                    }
                }
                //隐藏div
                div.style.display="none";
            };
            //搜索框失去焦点事件
            btn[0].onblur=function(event){
            //显示搜索历史词框
                div.style.display="block";
                //得到keywords对象的值
                var data=f.getLocal('keywords');
                if(data)
                {
                //将得到的历史词添加到对应的li元素中去
                    for(var i=0;i<data.length;i++)
                    {
                        //console.info(lis[i].childNodes[0]);
                        if(lis[i].childNodes[0]==undefined)
                        {
                        	//增加历史词的连接
                            lis[i].innerHTML="<a href='#'>"+data[i]+"</a>";
                        }else
                        {
                        	//避免每失去一次焦点就向li元素中添加一次历史词
                            return;
                        }

                    }
                    
                }    
            };
            //给每个历史词赋于点击事件,点击词后及给于input框赋值,顺便隐藏历史词框
            for(var i of lis)
            {
                i.onclick=function(){
                    btn[0].value=this.innerText;
                    div.style.display="none";
                };
            }
   
        </script>    
    </body>
</html>

最后效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/129532.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue项目如何快速上手echarts

1.安装echarts npm i echarts 2.导入echarts 说明&#xff1a;任意组件页面都可以导入echarts。如果在main.js里面导入&#xff0c;那么只需要导入一次就可以应用于任意页面。 import * as echarts from "echarts" 3.创建容器 说明&#xff1a;它具有一个指定的id属…

Selenium+Python自动化测试环境搭建

selenium python 自动化测试 —— 环境搭建 关于 selenium Selenium 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。支持的浏览器包括IE(7、8、9)、Mozilla Firefox、Mozilla Suite等。 Selenium 框架底层使用JavaS…

Leetcode—637.二叉树的层平均值【简单】

2023每日刷题&#xff08;二十五&#xff09; Leetcode—637.二叉树的层平均值 BFS实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ /*** Note: The returned array mu…

Docker+K8s基础(重要知识点总结)

目录 一、Docker的核心1&#xff0c;Docker引擎2&#xff0c;Docker基础命令3&#xff0c;单个容器运行多个服务进程4&#xff0c;多个容器运行多个服务进程5&#xff0c;备份在容器中运行的数据库6&#xff0c;在宿主机和容器之间共享数据7&#xff0c;在容器之间共享数据8&am…

已解决:TypeError: ‘NoneType‘ object is not callable 问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…

二叉树的中序遍历

一、题目。 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[] 示例 3&#xff1a; 输入&#xff1a;…

第三阶段第二章——Python高阶技巧

时间过得很快&#xff0c;这么快就来到了最后一篇Python基础的学习了。话不多说直接进入这最后的学习环节吧&#xff01;&#xff01;&#xff01; 期待有一天 春风得意马蹄疾&#xff0c;一日看尽长安花 o(*&#xffe3;︶&#xffe3;*)o 1.闭包 什么是闭包&#xff1f; 答…

基于SSM的课程管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

初识面向对象(类和对象)

目录 1. 面向对象的初步认知 2.面向对象与面向过程 3.类定义和使用 4.类的定义格式 练习 5.类的实例化 什么是实例化 6.this引用 为什么要有this引用 什么是this引用 this引用的特性 7.对象的初始化 默认初始化 就地初始化 使用构造方法初始化 1. 面向对象的初步…

完全零基础,教你创建数码配件小程序商城

现如今&#xff0c;随着数码产品的普及&#xff0c;数码配件市场也越来越火爆。如果你有兴趣进入这个行业&#xff0c;并且想要开设一家数码配件小程序商城&#xff0c;那么不要担心&#xff0c;即使你完全零基础也可以轻松实现。 首先&#xff0c;登录【乔拓云】网后台&#x…

武汉某母婴用品公司 - 集简云连接ERP和营销系统,实现库存管理的自动化

品牌介绍与关怀理念 武汉某母婴用品公司是一家专注于高端孕婴童护理用品的企业&#xff0c;积极响应和关怀孕产人群&#xff0c;全方位提供从待产用品到产后护理用品&#xff0c;再到婴童洗护用品和初生婴儿用品等一系列全面的母婴产品。我们的使命是满足客户的需求&#xff0…

Python语法基础(字符串 列表 元组 字典 集合)

目录 字符串(str)字符串的创建特殊情况字符串的转义字符字符串的运算符字符串常用方法求字符串长度去掉多余空格是否包含某子串分割字符串合并字符串替换字符串统计统计字符串出现的次数 练习&#xff1a;判断字符串是否为回文串 列表(list)列表的创建列表常用方法遍历列表列表…

高校教务系统登录页面JS分析——长沙理工大学教务系统

高校教务系统密码加密逻辑及JS逆向 本文将介绍高校教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文&#xff0c;你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文将是本专栏最后一篇文章&#xff0c;我看了绝大多数高…

计算机毕设 基于情感分析的网络舆情热点分析系统

文章目录 0 前言1 课题背景2 数据处理3 文本情感分析3.1 情感分析-词库搭建3.2 文本情感分析实现3.3 建立情感倾向性分析模型 4 数据可视化工具4.1 django框架介绍4.2 ECharts 5 Django使用echarts进行可视化展示5.1 修改setting.py连接mysql数据库5.2 导入数据5.3 使用echarts…

【前端】TypeScript核心知识点讲解

1.TypeScript简介及入门案例 &#xff08;1&#xff09;什么是TypeScript&#xff1f; TypeScript 是 JavaScript 的一个超集&#xff0c;支持 ECMAScript 6 &#xff08;ES6&#xff09;标准。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 设计目标是开发大…

基于SSM的软考系统设计实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Ubuntu 安装常见问题

1. 安装oh my zsh 搜狗输入法不能用 vim /etc/environmentexport XIM_PROGRAMfcitx export XIMfcitx export GTK_IM_MODULEfcitx export QT_IM_MODULEfcitx export XMODIFIERS“imfcitx” export LANG“zh_CN.UTF-8”配置完后重启&#xff0c;稍等一会&#xff0c;右上角会有个…

判断子序列

给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一个子序列&#…

RT-Thread 组件学习

FinSH控制台 在计算机发展的早期&#xff0c;图形系统出现之前&#xff0c;没有鼠标&#xff0c;甚至没有键盘。那时候人们如何与计算机交互呢&#xff1f;最早期的计算机使用打孔的纸条向计算机输入命令&#xff0c;编写程序。 后来随着计算机的不断发展&#xff0c;显示器、…

使用Java语言实现基本RS触发器

使用Java语言实现计算机程序来模拟基本RS触发器的工作过程&#xff0c;通过本账号2023年10月17日所发布博客“使用Java语言实现数字电路模拟器”中模拟基本逻辑门组成半加器电路的方法来模拟基本触发器的组成和时间延迟。 1 基本RS触发器电路结构 基本RS触发器&#xff08;又…