localStorage实现搜索历史

1.新建历史数组

var historyListArr = [];

2.新建初始化方法

function render(){// 获取localStorage数据数据是json格式var historyListJson = localStorage.getItem('historyList') || '[]'; //historyList预设的键;//把json数据转换成数组var historyListArr = JSON.parse(historyListJson);// 定义一个空htmlvar html = '';// 方法二for(var i=historyListArr.length-1;i>=0 ;i--){var history=historyListArr[i];var historyStr="'"+history+"'";html += '<li class="search-part-list-item"  οnclick="search('+historyStr+')"><a>'+history+'</a></li>';}// 判断html里面有数据没html = html||'<li>没有搜索记录</li>';// 把数据渲染到ul里面$('#history').html(html);
}

3.新建保存历史记录方法

function setHistoryItems(key) {// 判断点击搜索、搜索框内没有内容提示用户if(!key){alert('请输入内容');return false;}//如果页面初始化后将localStorage的内容同步到historyListArr中var historyList=localStorage.getItem("historyList");if (historyList&&historyListArr.length<1){historyListArr=JSON.parse(historyList);}//如果搜索参数已记录if (historyListArr.contains(key)) {historyListArr.remove(key)historyListArr.push(key);}else{// 追加数据到historyListArr数组中if (historyListArr.length>=5){historyListArr.shift();}historyListArr.push(key);}// 保存更新追加的数据到json数据中localStorage.setItem('historyList',JSON.stringify(historyListArr));// 渲染数据/直接调用前面的渲染数据函数render();// 清空搜索框$('.search-input').val('');
}

4.新建清空历史记录方法

function clearHistory() {// 清空数据historyListArr = []; //先把数组设置为空localStorage.removeItem('historyList'); //再删除空数据// 渲染数据/直接调用前面的渲染数据函数render();
}

总结

用户在搜索某条数据的时候调用步骤3的setHistoryItems，将当前搜索名称进行存储，在清空历史记录的时候调用步骤4进行清空。

localStorage实现搜索历史相关推荐

Angular中怎样通过localStorage实现数据持久化-实现存储搜索历史为例
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
[前端]本地存储搜索历史-localStorage
搜索框获取焦点后展示搜索历史,搜索历史记录可以存储在前端,如下图所示: 现在使用localStorage存储,可以打开开发者工具-Application-Local Storage(这里使用的是Chr ...
Vue用localStorage保存搜索历史记录/清空记录
Vue搜索历史记录/清空记录 1.搜索后保存历史记录, localStorage.setItem(key,value) 2.在保存前,先判断数组中是否已存在记录(有:则清除该记录),并将搜索值unsh ...
android的UDC功能,Android实现搜索历史功能
本文实例为大家分享了Android实现搜索历史的具体代码,供大家参考,具体内容如下 SharedPreferences实现本地搜索历史功能,覆盖搜索重复的文本,可清空 1. 判断搜索内容是否含表情,不 ...
vue项目搜索历史功能的实现
vue项目搜索历史功能的实现播放器项目中歌曲搜素页面的首先需要在state定义搜索历史,在其中保存搜索历史 state.js:<br>// 搜索历史: searchHistory: [ ...
SharedPreferences保存对象以及集合，腾讯MMKV使用，保存搜索历史
腾讯MMKV使用 implementation 'com.tencent:mmkv-static:1.2.9' MMKV.initialize(this);//会返回MMVK存储的目录(String) ...
linux 搜索命令历史,Linux 控制台神器：搜索历史命令 Ctrl + R ( ctrl + r to search the history command )...
Linux 控制台神器:搜索历史命令 Ctrl + R ( ctrl + r to search the history command ) 2013-01-29 15:30 访问量: 23761 分 ...
微信小程序 - 实现搜索界面(带热搜、搜索历史和结果页)
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码效果图: wxml 代码: <van-search value="{{ i ...
微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能
微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多 wxml页面 <view class="search-he ...

localStorage实现搜索历史

localStorage实现搜索历史

1.新建历史数组

2.新建初始化方法

3.新建保存历史记录方法

4.新建清空历史记录方法

总结

localStorage实现搜索历史相关推荐

最新文章

热门文章