Vue专题

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():删除数组的最后一个元素,并且改变原数组

上一篇 下一篇

猜你喜欢

热点阅读