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

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

news 2026/2/9 12:31:03

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

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/12/2 12:05:07

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...

编程新知 2025/12/1 1:27:24

用 FFmpeg 实现 RTMP 推流直播

RTMP&#xff08;Real-Time Messaging Protocol&#xff09; 是直播行业中常用的传输协议。 一般来说&#xff0c;直播服务商会给你&#xff1a; ✅ 一个 RTMP 推流地址&#xff08;你推视频上去&#xff09; ✅ 一个 HLS 或 FLV 拉流地址&#xff08;观众观看用&#xff09;…...

编程新知 2026/1/31 3:20:48

无头浏览器技术：Python爬虫如何精准模拟搜索点击

1. 无头浏览器技术概述 1.1 什么是无头浏览器&#xff1f; 无头浏览器是一种没有图形用户界面&#xff08;GUI&#xff09;的浏览器&#xff0c;它通过程序控制浏览器内核&#xff08;如Chromium、Firefox&#xff09;执行页面加载、JavaScript渲染、表单提交等操作。由于不渲…...

编程新知 2026/1/24 21:56:52

Windows开机自动启动中间件

WinSW&#xff08;Windows Service Wrapper 是一个开源的 Windows 服务包装器&#xff0c;它可以帮助你将应用程序打包成系统服务&#xff0c;并实现开机自启动的功能。 一、下载 WinSW 下载 WinSW-x64.exe v2.12.0 (⬇️ 更多版本下载) 和 sample-minimal.xml 二、配置 WinS…...

编程新知 2026/1/28 2:00:58