搜索功能在商品很多的时候尤为重要,那为什么要历史记录呢,是在乎用户的感受,节约用户思路和操作的时候而产生的一项新的功能,那我们就来讨论一些历史记录是怎么实现的?
首先我们来对比一下localStorage和sessionStorage:
localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。
由此看来localStorage更加适合我们做历史记录,即使用户关闭浏览器操作,下次进来依旧存在。
localStorage的操作也是极其简单的:
// Save data to the current local store localStorage.setItem("username", "John"); // Access some stored data alert( "username = " + localStorage.getItem("username")); // 或者直接对象操作: localStorage.historyItems = '历史记录'; console.log(localStorage.historyItems) // 历史记录
搜索历史记录展现形式:
V1版:
// 当为空的时候设置一个关键字进去,判断如果关键字是否存在,不存在就追加新的关键字 setHistoryItems(keyword) { let { historyItems } = localStorage; if (historyItems === undefined) { localStorage.historyItems = keyword; } else { const isNotExists = historyItems.split('|').filter((e) => e == keyword).length == 0; if (isNotExists) localStorage.historyItems += '|' + keyword; } }
V2版:
// 判断关键字是否存在,存在就移除添加在首位 setHistoryItems(keyword) { let { historyItems } = localStorage; if (historyItems === undefined) { localStorage.historyItems = keyword; } else { let historyItems = historyItems.split('|'); const isExists = historyItems.filter(e => e == keyword).length > 0; if (isExists) { historyItems = keyword + '|' + historyItems.filter(e => e != keyword).join('|'); } else { historyItems += '|' + keyword; } localStorage.historyItems = historyItems; } }
终极版:
// 不管关键字是否存在都移除,新的关键字添加在首位 setHistoryItems(keyword) { let { historyItems } = localStorage; if (historyItems === undefined) { localStorage.historyItems = keyword; } else { historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|'); localStorage.historyItems = historyItems; } }
再次更正版:解决只有一个关键字历史记录出现空记录
// 过滤一个结果的空记录添加,过滤空搜索 setHistoryItems(keyword) { keyword = keyword.trim(); let { historyItems } = localStorage; if (historyItems === undefined) { localStorage.historyItems = keyword; } else { const onlyItem = historyItems.split('|').filter(e => e != keyword); if (onlyItem.length > 0) historyItems = keyword + '|' + onlyItem.join('|'); localStorage.historyItems = historyItems; } }
清除历史记录关键字:
clearHistory() { localStorage.removeItem('historyItems'); }
更多实例应用扫码体验:
相关推荐
利用本地存储localstorage实现搜索框记住历史记录功能
通过localStorage实现留言板的功能,点击添加即可新增留言,可对留言进行修改及删除功能。
因为cookie在跨域的情况下,浏览器根本不允许互相访问的限制,为了突破这个限制,所以有了以下这个实现方案,使用postmessage和localstorage进行数据跨域共享。 原理比较简单,但是遇到的坑也不少,这里梳理一下,做...
原生html5,js利用localStorage写的历史输入预选(仿百度)
利用localStorage实现对ueditor编辑内容定时保存为草稿可以防止意外情况导致编辑内容消失!
cookie使用,localStorage使用, cookie的简单使用。Html5中localStorage的使用
使用 localStorage 缓存js
主要介绍了localstorage实现带过期时间的缓存功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
使用HTML+CSS+Javascript(ES6) / jQuery以及LocalStorage实现简易的学生管理系统,支持学生信息(学号、姓名、专业、班级)的CRUD
1.最多存储50个,多的覆盖最旧的记录 2.封装好的utils方法,设计好数据结构 3.支持断点续播的功能
localhistory最初是为了向语言游乐场添加历史功能而开发的。 如果您对此感兴趣,请查看。 demo目录中提供了一个的demo 。 安装 从dist目录下载localhistory.min.js 。 将其添加到您的网页: [removed][removed] ...
主要介绍了JS+HTML5本地存储Localstorage实现注册登录及验证功能,结合实例形式分析了基于JS+HTML5本地存储Localstorage实现注册登录及验证相关操作技巧,需要的朋友可以参考下
该文档在vue中实现localstorage存储,获取等基本操作,用于浏览器端缓存数据。可根据需要实现多久时间自动过期
JS localStorage实现本地缓存的方法,需要的朋友可以参考一下
使用Typescript编写更加易用的localStorage和sessionStorage的API
使用vue2+vuex+sass+vuetoast+localStorage实现的记事本
主要介绍了html5超简单的localStorage实现记住密码的功能实现,非常具有实用价值,需要的朋友可以参考下
一种更好的方法来使用localStorage和sessionStorage
页面的查询框增加一下显示历史查找记录 实现及踩坑记录 使用Element带输入建议的输入框来实现此需求。用法详见官网 1. 坑1:不能直接在querySearch里返回数组,一定要调用回调函数cb来处理数据 看了一下例子,建议...