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

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

news 2025/11/25 10:30:36

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

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/11/16 21:54:13

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/11/25 8:34:23

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/11/25 4:09:48