vue-搜索页-搜索历史本地存储-good-storage

1、存储搜索历史记录时使用good-storage 插件直接存数组，因为原生的localstorage api 需要将数组转换为字符串存储参考文档https://github.com/ustbhuangyi/storage

a.安装 npm install good-storage

b.新建cache.js本地存储相关的逻辑（缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到前面）

2.cache.js

/*把搜索的结果保存下来*/
/*用export把方法暴露出来*/
/*定义存储搜索的key  _search_定义内部使用的key*/
const SEARCH_KEY='_search_'
const SEARCH_MAX_LENGTH=15
/*插入方法     arr存储的数据  val传入存储的值  compare前后比较的函数  maxlen存入的最大值*/
function insertArray(arr,val,compare,maxlen){
    //findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
    const index=arr.findIndex(compare)
    if(index===0){  //数据为数组中的第一个数据 不做任何操作
        return 
    }
    if(index>0){  //数组中有这条数据并且不再第一个位置
        arr.splice(index,1)  //删掉这个数
    }
    arr.unshift(val);//把这条数据存储到数组中的第一个位置上
    if(maxlen && arr.length>maxlen){
        //如果有条数限制并且数组的个数大于限制数
        arr.pop() //方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值
        
    }
}
//开源storage的库，对localstorage和sessionstorage的封装
import storage from 'good-storage'
export function saveSearch(query){
    let searches=storage.get(SEARCH_KEY,[])
    /*逻辑是最后一次搜索的结果放到搜索历史的第一个*/
    insertArray(searches,query,(item)=>{        
        return item===query //这是传入的一个比较函数 说明query在这个数组中
    },SEARCH_MAX_LENGTH)
    storage.set(SEARCH_KEY,searches)
    return searches
}

3.页面使用 search.vue

<template>
<div class="bodywrapper">
     <headertop><h3>搜索</h3></headertop>
     <div class="banner"><img :src="imgsrc+'mt-user-bg.png'"></div>
     <div class="search_box">
            <div class="search_txt">

                    <input type="text" @focus="handleinput()" v-model="searchtxt" placeholder="请输入搜索内容" />

                    <span class="search_box_delete" v-show="searchtxt" @click="searchtxtclear"><img :src="imgsrc+'mt-close.png'"></span>
            </div>
            <button id="Subm" @click="Subm()">搜索</button>
     </div>
     <!--热门搜索-->
     <div class="sear_recomend clearfix">
            <ul>
                  <li v-for="(item,index) in hottxt" :class="{ on:index==0}" @click="hotsearch(item)">{{item}}</li>                  
            </ul>
     </div>
     <div class="sear_history clearfix" v-show="historyxs">
           <ul class="his_ulcon">
                 <p @click="clearhis()">清空历史记录</p> 
           </ul>
     </div>     
</div>
<script>
import {goback} from 'static/js/public.js'  //引用通用方法
import commonstate from 'static/js/publicstate.js' //引用公共常量
import {saveSearch} from 'static/js/cache.js'  //引用本地存储js
import storage from 'good-storage'  //引入good-storage包
import axios from 'axios'    
import $ from 'jquery'
export default{
    data(){
      return {
            imgsrc:commonstate.staticimg,
            searchtxt:'',      //input框输入字符v-model双向绑定
            historyxs:false,  //历史记录显示与不显示控制
            hottxt:''    //热门搜索
        }
     },
    methods:{
         searchtxtclear(){   //清空小叉号
             this.searchtxt='';
         },
         Subm(){ //点击搜索
            if(this.searchtxt!=''){ //搜索框不为空
               saveSearch(this.searchtxt); // 本地存储搜索的内容
                 this.$router.push({ 
                          path: '/searchlist'
                          });
                this.historyxs=false;
                this.searchtxt='';
             }             
         },
         handleinput(){         //输入框获取焦点显示搜索历史记录    
             //为避免重复先清空再添加
             $('.his_ulcon').children('li').remove();
             let searches=storage.get('_search_');
             if(searches!=undefined){
                 this.historyxs=true;         
                 for(var i=0;i<searches.length;i++){
                    $('.his_ulcon p').before(`<li @click="hotsearch(searches[i])">${searches[i]}<li>`)
                 }
             }
                                       
         },
         clearhis(){  //清空历史记录
             storage.remove('_search_');
             $('.his_ulcon').children('li').remove();
         },
         hotsearch(item){    //点击热门搜索把搜索的记录添加到good-storage中并跳转搜索列表页         
             saveSearch(item);
             this.$router.push({
                  path: '/searchlist'
                });
            this.historyxs=false;
         }
     },
     watch:{
         'searchtxt':function(){  
                  //监听输入内容向后台请求数据
                  console.log('数据改变触发相应事件');
         }
     },
    created(){
        axios.get('http://172.16.2.43:8080/static/data/search.json').then((res)=>{
            console.log(res.data);
            this.hottxt=res.data.hotsearch;
        })
    },
    components:{
          headertop
     }
}
</script>