vue+mongoose+node.js项目总结第五篇_localStorage保存历史记录

一、前言                                                                           

                          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

                               https://www.cnblogs.com/pengc/p/8714475.html

二、主要内容                                                                    

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();//这里记得实时获取当前的历史搜索数组
      }
    }