vue做搜索功能的历史记录
2018-09-12 本文已影响1726人
echo三文鱼
1、需求:判断登录之后需要记录下搜索过的关键词(不超过5个)
2、要用到浏览器的localStorage,将搜索的关键词存入
3、上代码
a、页面加载的时候,先读取localStorage里面的searchWord
created:function(){
this.historyWord=localStorage.getItem('searchWord')
this.historyWord=this.historyWord.split(',') //将字符串转成数组
},
b、搜索的时候,在搜索成功之后,先从localStorage里面取得关键词的数组,判断 如果为null,就在创建一个,不为null的时候,取得数组arr,再判断搜索词是否重复,没重复的时候添加至数组,再判断时候超过限定的个数,超过的时候,先添加到数组的最前面,并且去掉最后一个
let searchWord=localStorage.getItem('searchWord');
if(searchWord==null){
localStorage.setItem('searchWord',self.message);
}else{
let arr=localStorage.getItem('searchWord')
arr=arr.split(',')
if(arr.indexOf(self.message)!=-1){
arr=arr
}else{
arr.unshift(self.message);
}
self.historyWord=arr
if(self.historyWord.length>5){
self.historyWord.pop()
}
localStorage.setItem('searchWord',self.historyWord)
ps:用到的数组api
split(' , '):将字符串按照需要分割成数组,且返回该数组
indexOf( ' n ' ):查找元素,未找到返回-1
unshift( ' n ' ):添加一个元素n至数组的最前面,并返回数组的长度,改变原数组
pop():删除数组的最后一个元素,并且改变原数组