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

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

news 2026/4/22 5:41:02

//首先是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

Ansys Comsol 力磁耦合仿真：金属磁记忆检测与压磁检测等多种电磁无损检测技术磁场分析...

Ansys Comsol 力磁耦合仿真&#xff0c;包括直接耦合与间接耦合方式&#xff0c;模拟金属磁记忆检测以及压磁检测等多种电磁无损检测技术磁场分析。 囊括静力学分析&#xff0c;弹塑性残余应力问题&#xff0c;疲劳裂纹扩展&#xff0c;流固耦合分析&#xff0c;磁致伸缩与逆磁…...

编程新知 2026/4/22 4:30:59

告别玄学调试：用Wireshark抓包实战解析PCIe链路训练与有序集（TS1/TS2/EIOS全解）

从信号到问题&#xff1a;Wireshark抓包实战解码PCIe链路训练全流程 当一块全新的PCIe显卡无法被系统识别&#xff0c;或是企业级NVMe存储阵列频繁出现链路降速时&#xff0c;硬件工程师的调试台上总少不了一台运行Wireshark的笔记本和几个神秘的TS序列。这些看似简单的有序集&…...

编程新知 2026/4/22 4:06:55

摄影爱好者必看：你的RAW转JPEG设置，可能正在‘出卖’你的修图步骤

摄影爱好者必看&#xff1a;你的RAW转JPEG设置&#xff0c;可能正在‘出卖’你的修图步骤 当你在Lightroom中精心调整一张照片的曝光、对比度和色彩&#xff0c;最后点击"导出"按钮时&#xff0c;可能不会想到这个简单的操作正在为专业分析者留下可追踪的"数字指…...

编程新知 2026/4/22 3:27:56

手把手教你用官方工具制作Win10安装U盘，告别第三方PE和Ghost镜像

微软官方工具制作Win10安装U盘全指南&#xff1a;纯净安装的终极解决方案 当系统运行缓慢或遭遇顽固病毒时&#xff0c;重装Windows往往是最高效的解决方案。但市面上充斥着各种第三方PE工具和Ghost镜像&#xff0c;它们可能暗藏恶意软件、强制捆绑无关程序&#xff0c;甚至修…...

编程新知 2026/4/22 3:23:55

Switch模拟器：Ryujin模拟器教程

下载配置模拟器前需要先安装游戏运行库&#xff0c;显卡驱动正常 龙神模拟器官网&#xff1a;https://ryujinx.org/ switch模拟器的区别 Ryujinx【龙神模拟器】兼容性更好&#xff0c;刚出来的游戏也能运行&#xff0c;但由于它以前只支持OpenGL&#xff0c;所以帧率较低&am…...

编程新知 2026/4/22 2:29:34

别再抠语法细节了：高吞吐 Python 系统里，数据结构选对，往往比“微优化”更重要

别再抠语法细节了&#xff1a;高吞吐 Python 系统里&#xff0c;数据结构选对&#xff0c;往往比“微优化”更重要 很多人做 Python 性能优化时&#xff0c;第一反应是这些事&#xff1a;把 for 改成列表推导式、把字符串拼接改成 join、把局部变量提前绑定、把属性访问缓存到函…...

编程新知 2026/4/22 1:49:01

从Houdini到UE5：VAT顶点动画纹理的‘黑盒’揭秘与自定义Shader进阶指南

从Houdini到UE5&#xff1a;VAT顶点动画纹理的‘黑盒’揭秘与自定义Shader进阶指南 在影视级实时特效领域&#xff0c;顶点动画纹理&#xff08;Vertex Animation Texture&#xff09;技术正逐渐成为连接DCC工具与游戏引擎的桥梁。当传统骨骼动画难以应对复杂物理模拟&#xff…...

编程新知 2026/4/22 0:56:18

HEPTv2：基于LSH与Transformer的高效粒子轨迹重建

1. 项目概述&#xff1a;HEPTv2的诞生背景与技术定位在粒子物理实验领域&#xff0c;带电粒子轨迹重建一直是个令人头疼的计算难题。想象一下&#xff0c;当质子束在大型强子对撞机&#xff08;LHC&#xff09;中以接近光速对撞时&#xff0c;每次碰撞会产生数百个带电粒子&…...

编程新知 2026/4/22 0:32:10

别再死记硬背公式了！用MATLAB/Simulink手把手教你搭建非线性扰动观测器（NDOB）

非线性扰动观测器实战&#xff1a;从Simulink仿真到参数调优 在控制工程领域&#xff0c;非线性扰动观测器(NDOB)就像一位隐形的守护者&#xff0c;默默抵消着系统受到的未知干扰。想象一下&#xff0c;当你精心设计的控制器因为突如其来的负载变化或外部干扰而性能下降时&…...

编程新知 2026/4/22 0:07:31

da da wda d

da w d w...

编程新知 2026/4/21 23:39:21