vue-検索ページ-検索履歴ローカルストレージ-good-storage

1、検索履歴を格納する際にgood-storageプラグインを使用して配列を直接格納する.オリジナルのlocalstorage apiは配列を文字列に変換して参照ドキュメントを格納する必要があるからである.https://github.com/ustbhuangyi/storage
 a.npm install good-storageのインストール
 b.新規cache.jsローカルストレージに関するロジック(ローカルにキャッシュされたデータは最大15個までキャッシュされ、新たに1番目に挿入され、まず現在のストレージデータが得られた場合、キーワードを配列に格納し、配列に同じデータがある場合は重複データを削除し、新しいキーワードを前に格納する)
 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>

 
転載先:https://www.cnblogs.com/catbrother/p/9203569.html