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>