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

localStorage实现历史记录搜索功能

📝个人主页:爱吃炫迈
💌系列专栏:JavaScript
🧑‍💻座右铭:道阻且长,行则将至💗

文章目录

  • 为什么使用localStorage
  • 如何使用localStorage
  • 实现历史记录搜索功能(原生JS实现)
    • 效果展示
    • 代码实现


为什么使用localStorage

首先我们来对比一下localStorage、sessionStorage和cookie:

cookie最大的问题就是内存问题,cookie的存储空间只有4K,localStorage和sessionStorage可以拓展cookie4K这个限制,一般浏览器支持的是5M大小。

localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。但是在相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

由此看来localStorage更加适合我们做历史记录,即使用户关闭浏览器操作,下次进来依旧存在。

如何使用localStorage

二次封装localStorage

实现历史记录搜索功能(原生JS实现)

效果展示

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 250px;position: absolute;}ul li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px dashed #ccc;}button {cursor: pointer;}div {width: 250px;text-align: right;cursor: pointer;font-size: 12px;}input {padding: 5px;margin: 10px;}</style>
</head><body><input type="search" placeholder="输入搜索关键字" /><input type="button" value="搜索" /><div>清空搜索记录</div><ul><li>没有搜索记录</li></ul><script>// 监听dom执行完成后就执行JavaScript代码document.addEventListener('DOMContentLoaded', function () {// 根据历史记录渲染历史列表// 获取localStorage数据数据是json格式var historyListJson = localStorage.getItem('historyList') || '[]'; //historyList预设的键;//把json数据转换成数组var historyListArr = JSON.parse(historyListJson);// 1. 渲染数据function render() {// 定义一个空htmlvar html = '';// 遍历数组historyListArr.forEach((item, index) => {html = `<li><span>${item}</span><button data-index="${index}">删除</button></li>` + html});// 判断html里面有数据没html = html || '<li>没有搜索记录</li>';// 把数据渲染到ul里面const ul = document.querySelector('ul')ul.innerHTML = html}render();// ------------------------------------------------------------------------------------------------------------------------------// 2. 点击搜索的时候更新历史搜索记录const button = document.querySelector('input[type="button"]');button.addEventListener('click', function () {// 获取搜索框的内容var key = document.querySelector('input').value;// 判断点击搜索、搜索框内没有内容提示用户if (!key) {alert('请输入内容');return false;}// 去重函数function killRepeat(val) {var kill = 0for (let i = historyListArr.length - 1; i >= 0; i--) {if (val === historyListArr[i]) {kill++}}return kill}if (killRepeat(key) == 0) {// 追加数据到historyListArr数组中historyListArr.push(key);// 保存更新追加的数据到json数据中localStorage.setItem('historyList', JSON.stringify(historyListArr));// 渲染数据/直接调用前面的渲染数据函数render();}// 清空搜索框document.querySelector('input[type="search"]').value = '';// 页面跳转·····});// ------------------------------------------------------------------------------------------------------------------------// 3. 删除数据:因为a的id是动态生成的需要冲ul拿到a的id// 获取 ul 元素const ul = document.querySelector('ul');ul.addEventListener('click', function (event) {if (event.target.tagName === 'BUTTON') {// 获取点击的 div 元素的idconst index = event.target.dataset.index;// 删除数组内的指定位置数据historyListArr.splice(index, 1);// 保存更新追加的数据到json数据中localStorage.setItem('historyList', JSON.stringify(historyListArr));// 渲染数据/直接调用前面的渲染数据函数render();}});// ---------------------------------------------------------------------------------------------------------------------------// 4. 清除全部历史记录const div = document.querySelector('div');div.addEventListener('click', function () {// 清空数据historyListArr = [];// 删除空数据localStorage.removeItem('historyList');// 渲染数据render();});});</script></body></html>

相关文章:

localStorage实现历史记录搜索功能

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;JavaScript &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; 文章目录 为什么使用localStorage如何使用localStorage实现历史记录搜索功能&#xff08…...

计算机网络(一):概述

参考引用 计算机网络微课堂-湖科大教书匠计算机网络&#xff08;第7版&#xff09;-谢希仁 1. 计算机网络在信息时代的作用 计算机网络已由一种通信基础设施发展成为一种重要的信息服务基础设施计算机网络已经像水、电、煤气这些基础设施一样&#xff0c;成为我们生活中不可或…...

visual code 下的node.js的hello world

我装好了visual code &#xff0c;想运行一个node.js 玩玩。也就是运行一个hello world。 一&#xff1a;安装node.js &#xff1a; 我google 安装node.js 就引导我到下载页面&#xff1a;https://nodejs.org/en/download 有 Windows Installer (.msi) 还有Windows Binary (…...

MySQL——四、SQL语句(下篇)

MySQL 一、常见的SQL函数1、数学函数2、日期函数3、分组函数(聚合函数)4、流程控制函数 二、where条件查询和order by排序三、分组统计四、多表关联查询1、交叉连接CROSS2、内连接inner3、外连接&#xff1a;outer4、子查询 五、分页查询 一、常见的SQL函数 1、length(str):获…...

蓝桥杯每日一题2023.10.2

时间显示 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 输入为毫秒&#xff0c;故我们可以先将毫秒转化为秒&#xff0c;由于只需要输出时分&#xff0c;我们只需要将天数去除即可&#xff0c;可以在这里多训练一次天数判断 #include<bits/stdc.h> using namespace std…...

红外遥控器 数据格式,按下及松开判断

红外遥控是一种无线、非接触控制技术&#xff0c;具有抗干扰能力强&#xff0c;信息传输可靠&#xff0c;功耗低&#xff0c;成本低&#xff0c;易实现等显著优点&#xff0c;被诸多电子设备特别是家用电器广泛采用&#xff0c;并越来越多的应用到计算机系统中。 同类产品的红…...

win32进程间通信方式(13种)

win32进程间通信 文件映射共享内存匿名管道命名管道远程过程调用&#xff08;RPC&#xff09;对象连接与嵌入&#xff08;OLE&#xff09;动态数据交换&#xff08;DDE&#xff09;剪贴板WM_COPYDATA消息邮件槽其它 文件映射 特点&#xff1a;本地间通信&#xff0c;不能用于网…...

基于Vue+ELement搭建动态树与数据表格实现分页模糊查询

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《ELement》。&#x1f3af;&#x1f3af; &#x1…...

多线程案例 - 单例模式

单例模式 ~~ 单例模式是常见的设计模式之一 什么是设计模式 你知道象棋,五子棋,围棋吗?如果,你想下好围棋,你就不得不了解一个东西,”棋谱”,设计模式好比围棋中的 “棋谱”. 在棋谱里面,大佬们,把一些常见的对局场景,都给推演出来了,照着棋谱来下棋,基本上棋力就不会差到哪…...

云原生Kubernetes:对外服务之 Ingress

目录 一、理论 1.Ingress 2.部署 nginx-ingress-controller(第一种方式) 3.部署 nginx-ingress-controller(第二种方式) 二、实验 1.部署 nginx-ingress-controller(第一种方式) 2.部署 nginx-ingress-controller(第二种方式) 三、问题 1.启动 nginx-ingress-controll…...

Java21 新特性

文章目录 1. 概述2. JDK21 安装与配置3. 新特性3.1 switch模式匹配3.2 字符串模板3.3 顺序集合3.4 记录模式&#xff08;Record Patterns&#xff09;3.5 未命名类和实例的main方法&#xff08;预览版&#xff09;3.6 虚拟线程 1. 概述 2023年9月19日 &#xff0c;Oracle 发布了…...

Rest Template 使用

大家好我是苏麟 今天带来Rest Template . spring框架中可以用restTemplate来发送http连接请求, 优点就是方便. Rest Template 使用 Rest Template 使用步骤 /*** RestTemple:* 1.创建RestTemple类并交给IOC容器管理* 2. 发送http请求的类*/ 1.注册RestTemplate对象 SpringB…...

IDEA git操作技巧大全,持续更新中

作者简介 目录 1.创建新项目 2.推拉代码 3.状态标识 5.cherry pick 6.revert 7.squash 8.版本回退 9.合并冲突 1.创建新项目 首先我们在GitHub上创建一个新的项目&#xff0c;然后将这个空项目拉到本地&#xff0c;在本地搭建起一个maven项目的骨架再推上去&#xff0…...

计算机操作系统 (王道考研)笔记(四)I/O系统

目录 1 I/O1.1 I/O 概念和分类1.1.1 I/O 定义1.1.2 I/O 分类 1.2 I/O控制器1.3 I/O 软件层次结构1.4 I/O 应用程序接口和驱动程序应用接口 1 I/O 1.1 I/O 概念和分类 1.1.1 I/O 定义 BIOS&#xff08;英文&#xff1a;Basic Input/Output System&#xff09;&#xff0c;即基…...

【Java基础】抽象类和接口的使用

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【JavaSE_primary】 本专栏旨在分享学习JavaSE的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 目录 一、抽象类抽象类概念…...

Golang的性能优化

欢迎&#xff0c;学习者们&#xff0c;来到Golang性能优化的令人兴奋的世界&#xff01;作为开发者&#xff0c;我们都努力创建高效、闪电般快速的应用程序&#xff0c;以提供出色的用户体验。在本文中&#xff0c;我们将探讨优化Golang应用程序性能的基本技巧。所以&#xff0…...

实现两栏布局的五种方式

本文节选自我的博客&#xff1a;实现两栏布局的五种方式 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是MilesChen&#xff0c;偏前端的全栈开发者。&#x1f4dd; CSDN主页&#xff1a;爱吃糖的猫&#x1f525;&#x1f4e3; 我的博客&#xff1a;爱吃糖的猫&…...

博物馆门票预约APP的设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

【AI视野·今日Robot 机器人论文速览 第四十四期】Fri, 29 Sep 2023

AI视野今日CS.Robotics 机器人学论文速览 Fri, 29 Sep 2023 Totally 38 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;NCF,基于Neural Contact Fields神经接触场的方法实现有效的外部接触估计和插入操作。 (from FAIR ) 操作插入处理结果&am…...

一维数组和二维数组的使用(char类型)

目录 导读1. 字符数组1.1 字符数组的创建1.2 字符数组的初始化1.3 不同初始化在内存中的不同1.3.1 strlen测试1.3.2 sizeof测试1.3.3 差异原因 1.4 字符数组的使用 2. 数组越界3. 数组作为函数参数博主有话说 导读 我们在前面讲到了 int 类型的数组的创建和使用&#xff1a; 一…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...