网站策划薪资,省网站建设,上海百度推广平台,西丽网站设计#x1f4dd;个人主页#xff1a;爱吃炫迈 #x1f48c;系列专栏#xff1a;JavaScript #x1f9d1;#x1f4bb;座右铭#xff1a;道阻且长#xff0c;行则将至#x1f497; 文章目录 为什么使用localStorage如何使用localStorage实现历史记录搜索功能#xff08… 个人主页爱吃炫迈 系列专栏JavaScript 座右铭道阻且长行则将至 文章目录 为什么使用localStorage如何使用localStorage实现历史记录搜索功能原生JS实现效果展示代码实现 为什么使用localStorage
首先我们来对比一下localStorage、sessionStorage和cookie
cookie最大的问题就是内存问题cookie的存储空间只有4KlocalStorage和sessionStorage可以拓展cookie4K这个限制一般浏览器支持的是5M大小。
localStorage生命周期是永久这意味着除非用户显示在浏览器提供的UI上清除localStorage信息否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页一旦窗口或标签页被永久关闭了那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。但是在相同浏览器的不同页面间可以共享相同的localStorage页面属于相同域名和端口但是不同页面或标签页间无法共享sessionStorage的信息。
由此看来localStorage更加适合我们做历史记录即使用户关闭浏览器操作下次进来依旧存在。
如何使用localStorage
二次封装localStorage
实现历史记录搜索功能原生JS实现
效果展示 代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {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
/headbodyinput typesearch placeholder输入搜索关键字 /input typebutton value搜索 /div清空搜索记录/divulli没有搜索记录/li/ulscript// 监听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 lispan${item}/spanbutton 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[typebutton]);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[typesearch]).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
