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

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

news 2025/9/11 6:14:34

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/7/9 0:22:36

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/9/10 1:23:08

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/8/11 11:25:20

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/8/14 2:06:45

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/8/4 23:26:41

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/9/2 16:56:21

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/9/7 21:17:14

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/7/5 14:21:20

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07