一、前言
1、保存历史搜索记录也是一个常用的功能。
2、两种比较流行的历史记录保存的方法：
localstorage: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
sessionstorage: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
3、几个容易混淆的东西：cookie、session、localStorage、sessionStorage
二、主要内容
1、准备篇
在vue-cli脚手架中为了让代码有更高的可读性、可以将造作web Storage的代码单独封装在一个js文件中
2、localStorage中封装了更新、删除、清空localStorage的方法
注意点：localStorage中不能存储数组、所以在保存的时候需要将数组转化为字符串的形式这里使用:JSON.stringify()
/*
updateSearch()思路：
1）需要一个数组来存放每次搜索的东西
2）每次调用update方法的时候先看看本地是否已经存在保存历史搜索记录的数组
3）如果已经存在就直接追加，如果还不存在就新建
4) 将搜索数组存在localstorage中
*/
export function updateSearch(searchval) {
let storage = window.localStorage;
if (storage.search) { //storage里面是否有search保存历史记录的数组
let search = JSON.parse(storage.search); //取出历史记录search数组，并且将他转化为数组
let index = search.indexOf(searchval); //在search数组里面查找是否有输入的searchval
if (index != -1) { //找到了，
search.splice(index, 1);//删除之前存的那一个
search.unshift(searchval);//在数组的最前面插入刚刚输入的
} else {//没有找到
if (search.length <= 7) { //如果search数组小于7
search.unshift(searchval);//将刚刚查找的searchval插入到数组的最前面
} else {//search里面已经大于7
search.splice(search.length-1, 1);//删除最后一个
search.unshift(searchval);//将刚刚输入的插入到数组的最前面
}
}
search = JSON.stringify(search); //将数组转化成字符串存入localstorage中,因为localStorage不支持保存数组
storage.setItem('search', search);
} else {//如果没有
let search = JSON.stringify([searchval]);
storage.setItem('search', search);//如果没有就设置一个search数组
}
}
//删除某一个历史记录
export function deleteOne(index) {
let storage = window.localStorage;
let search = JSON.parse(storage.search);//search转化为数组
search.splice(index,1);
search = JSON.stringify(search);
storage.setItem('search', search); //保存
}
//清除所有历史记录
export function clear() {
let storage = window.localStorage;
let search = JSON.stringify([]); //清除置为的时候将数组
storage.setItem('search', search);
}
3、使用
第一步：在需要的组件页面按需加载
import {updateSearch} from '../../common/js/localStorage'
第二步：每次调用搜索方法的时候就更新一下历史记录数组
//搜索函数
getSearchList(){
updateSearch(this.searchText);//将当前的文字存入搜索列表
this.$axios.get(`/api/search?searchText=${this.searchText}`).then((res) => {
this.user = res.data.user;
this.moodList = res.data.moodList;
if (this.user||this.moodList.length){
this.resNo = false;
}else {
this.resNo = true;
}
console.log(res)
})
},
第三步：删除和清空调用
methods:{
getList(){//得到当前locallStorage中存储的搜索列表
if (window.localStorage.search){
this.searchList = JSON.parse(window.localStorage.search);
}
},
_deleteOne(index){
deleteOne(index);
this.getList();
},
_clear(){
clear();
this.getList();//这里记得实时获取当前的历史搜索数组
}
}
虽然现在走得很慢，但不会一直这么慢
