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

localStorage实现历史记录搜索功能

news 2025/9/14 15:55:12

📝个人主页：爱吃炫迈
💌系列专栏：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实现历史记录搜索功能

文章目录

为什么使用localStorage

如何使用localStorage

实现历史记录搜索功能（原生JS实现）

效果展示

代码实现

相关文章：

localStorage实现历史记录搜索功能

计算机网络（一）：概述

visual code 下的node.js的hello world

MySQL——四、SQL语句（下篇）

蓝桥杯每日一题2023.10.2

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

win32进程间通信方式（13种）

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

多线程案例 - 单例模式

云原生Kubernetes：对外服务之 Ingress

Java21 新特性

Rest Template 使用

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

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

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

Golang的性能优化

实现两栏布局的五种方式

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

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

一维数组和二维数组的使用（char类型）

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

UE5 学习系列（二）用户操作界面及介绍

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

五年级数学知识边界总结思考-下册

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

HDFS分布式存储 zookeeper

回溯算法学习

JS手写代码篇----使用Promise封装AJAX请求

【java】【服务器】线程上下文丢失是指什么