当前位置： 首页 > news >正文

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

news 2026/1/20 15:04:51

//首先是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(){//检查是否已经设置了keywordsvar 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);}}//隐藏divdiv.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>

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

相关文章：

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

//首先是storage的一封装 //storage.js文件 function storage(){//设置storage密钥this.ms"mystorage";}//以下为函数的原型方法//获得localStorage值storage.prototype.getLocalfunction(key){//先检查设置的localStorage的密钥var mydatalocalStorage.getItem(thi…...

编程日记 2023/11/11 0:08:12

20231108在Ubuntu22.04下编译安装cmake-3.27.7.tar.gz

20231108在Ubuntu22.04下编译安装cmake-3.27.7.tar.gz 2023/11/8 17:28 缘起&#xff0c;编译cv180zb的时候提示说cmake的版本低&#xff01; OBJCOPY platform/generic/firmware/payloads/test.bin OBJCOPY platform/generic/firmware/fw_dynamic.bin OBJCOPY platfor…...

编程日记 2023/11/11 0:07:11

如此理解sed会简单

缘由 以前总觉得sed的语法过于难懂&#xff0c;用的时间都不一定会想起来怎么用。 每次都需要先查找帮助&#xff0c;然后才能应用&#xff0c;但随后又忘 &#x1f626; 直到今天通过man sed链接到sed官网上对sed的介绍&#xff0c;才明白它竟然是如此的简单明了&#xff0…...

编程日记 2023/11/11 0:04:07

数据库-MySQL之数据库必知必会1-9章

检索数据 1.检索不重复的行 从 Customers 表中检索所有的 ID select DISTINCT cust_id from Customers;DISTINCT表示去掉重复的行 2.限制结果-分页 SELECT语句返回所有匹配的行&#xff0c;它们可能是指定表中的每个行。为了返回第一行或前几行&#xff0c;可使用LIMIT子句。…...

编程日记 2023/11/11 0:03:06

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

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

编程日记 2023/11/11 0:02:05

k8s存储卷 PV和PVC

目录 emptyDir存储卷 hostPath存储卷 nfs共享存储卷 PVC 和 PV 生命周期 一个PV从创建到销毁的具体流程如下&#xff1a; 静态pvc 动态pvc 3、定义PVC 4、测试访问 搭建 StorageClass NFS&#xff0c;实现 NFS 的动态 PV 创建 1、在stor01节点上安装nfs&#xff0…...

编程日记 2023/11/11 0:00:03

【架构】后端项目经典分层架构介绍

文章目录 前言分层架构项目实践示例项目结构 其他知识 前言 开发后端项目时&#xff0c;我们最常见的一种架构模式就是分层架构 。 所谓的分层架构&#xff0c;就是把系统自上而下分为多个不同的层&#xff0c;每一层都有特定的功能和职责&#xff0c;且只和自己的直接上层与…...

编程日记 2023/11/10 23:57:57

二叉树的中序遍历

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

编程日记 2023/11/10 23:56:57

什么是代理IP池？真实测评IP代理商的IP池是否真实？

代理池充当多个代理服务器的存储库&#xff0c;提供在线安全和匿名层。代理池允许用户抓取数据、访问受限制的内容以及执行其他在线任务&#xff0c;而无需担心被检测或阻止的风险。代理池为各种在线活动&#xff08;例如网页抓取、安全浏览等&#xff09;提高后勤保障。 读完…...

编程日记 2023/11/10 23:55:56

接收表单数据

如果您尝试按下提交按钮&#xff0c;浏览器将显示“Method Not Allowed”错误。这是因为到目前为止&#xff0c;前一节中的登录视图函数完成了一半的工作。它可以在网页上显示表单&#xff0c;但是还没有逻辑来处理用户提交的数据。这是Flask-WTF使工作变得非常简单的另一个领域…...

编程日记 2023/11/10 23:54:55

串口通信(11)-CRC校验介绍算法

本文为博主 日月同辉&#xff0c;与我共生&#xff0c;csdn原创首发。希望看完后能对你有所帮助&#xff0c;不足之处请指正&#xff01;一起交流学习&#xff0c;共同进步&#xff01; > 发布人&#xff1a;日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…...

编程日记 2023/11/10 23:53:54

什么是Java虚拟机（JVM），它的作用是什么？

什么是Java虚拟机&#xff08;JVM&#xff09; Java虚拟机&#xff08;Java Virtual Machine&#xff0c;JVM&#xff09;是Java平台的关键组成部分&#xff0c;它是一种在不同操作系统上运行Java程序的虚拟计算机。 JVM的作用是执行Java字节码&#xff08;Java bytecode&#…...

编程日记 2023/11/10 23:52:53

力扣876：链表的中间结点

力扣876&#xff1a;链表的中间结点 题目描述&#xff1a; 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5]…...

编程日记 2023/11/10 23:51:52

三菱FX3U系列—原点回归指令

目录 一、简介 二、指令形式 1、原点指令[ZRN/DZRN] 2、带搜索的原点回归指令[DSZR] 三、回归指令运行过程 1、ZRN原点回归运行过程 2、带搜索的原点回归运行过程 四、特殊辅助继电器 五、特殊输出模块 六、总结 一、简介 用于将电机或伺服驱动器控制的轴回到预定的原…...

编程日记 2023/11/10 23:46:43

ES常用查询命令

一、基本命令 1、获取所有_cat命令 curl -X GET localhost:9200/_cat 2、获取es集群服务健康状态 curl -X GET localhost:9200/_cat/health?v epoch: 时间戳的 Unix 时间戳格式&#xff0c;表示快照生成的时间。 timestamp: 可读性更强的时间戳格式&#xff0c;表示快照生…...

编程日记 2023/11/10 23:45:43

【Qt之元对象系统】

描述 Qt的元对象系统&#xff08;Meta-Object System&#xff09;是Qt框架的核心机制之一&#xff0c;它提供了运行时类型信息&#xff08;RTTI&#xff09;和信号与槽&#xff08;Signals and Slots&#xff09;机制的支持。元对象系统在Qt中扮演了很重要的角色&#xff0c;它…...

编程日记 2023/11/10 23:43:41

基于FPGA的EMAC模块与FIFO模块：高速数据传输与存储

基于FPGA的EMAC模块与FIFO模块&#xff1a;高速数据传输与存储 在现代社会&#xff0c;高速数据传输和存储是信息技术领域的关键问题之一。而基于FPGA的EMAC模块与FIFO模块则成为了解决这些问题的重要途径。本文将介绍这两个模块的原理、实现方法以及如何在FPGA中应用它们。 …...

编程日记 2023/11/10 23:42:39

大数据毕业设计选题推荐-农作物观测站综合监控平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

编程日记 2023/11/10 23:41:38

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

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

编程日记 2023/11/10 23:40:37

element-ui的form校验失败

数值与字符串混淆 数值 <el-input type"number" v-model.number"form.averageFruitWeight" placeholder"请输入平均单果重"/>字符串 fruitDevelopmentStage: [{pattern: ^[-\\]?([0-9]\\.?)?[0-9]$, message: 输入必须为数字, trigge…...

编程日记 2023/11/10 23:39:37

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/1/20 10:43:56

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/1/15 5:27:10

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/18 20:01:14

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2026/1/19 2:37:34

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2026/1/20 3:41:57

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2026/1/15 7:57:38

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/15 6:53:42

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2026/1/19 1:29:58

Axure零基础跟我学：展开与收回

亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！ Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题：Axure菜单展开与收回 课程视频：...

编程新知 2026/1/20 0:23:08