Búsqueda vue aplicación caché de la historia

ideas:

1. caché El navegador guardar permanentemente los datos del historial de búsqueda.

2. Guardar los datos de la página de inicialización a la variable de página.

3. Busque la historia y eliminar además de cómo sincronizar la caché.

---------------- ---------------- mirada directa en el código

* Utilizar la vue distal, aquí es un fragmento de código *

1. div página

<! - -历史搜索begin-- -> 
    < div estilo = "margin-top: 46px" > 
      < div v-si = "this.showFlag === verdadera" clase = "search-historia" > 
        < div clase = "punta-palabras" > 
          < div estilo = "float: left;" > 
            < H4 >搜索历史</ h4 > 
          </ div > 
          < div estilo = "float: right;" @Haga clic = "clearHistoryItems" > 
            <= "../../ img / img / eliminar-1.png" anchura = "16px" /> 
          </ div > 
        </ div > 
        < p estilo = "margin-bottom: 10px" > & nbsp; </ P > 
        < div   v-de = "(punto), índice en searchHistoryList" : clave = "índice" @Haga clic = "searchByHistoryKeyWord (elemento)" clase = "historia-keywords" > 
          & nbsp; & nbsp; {{elemento}} & nbsp; & nbsp; 
        </ Div > 
      </ div >
    
    ->

 

2. Visualización de datos

Los datos () {
       retorno {
         // historial de búsqueda 
        searchHistoryList: [],
         // marcar el historial de búsqueda 
        showflag: false , 
        loadShow: false 
      } 
    },

 

Algunos métodos 3.vue historial de búsqueda

Métodos: { 
      showHistory () { 
        IF ( el presente .searchHistoryList.length> 0 ) {
           el presente .showFlag = a verdaderos 
        } 
      }, 
      // Borrar historial 
      clearHistoryItems () { 
        localStorage.removeItem ( 'historyItems' )
         esto el .searchHistoryList = []
         del presente = .showFlag en false 
      }, 
      // registro en blanco filtro se agrega resultado, filtrados de búsqueda de aire 
      appendKeywords (valor) {
         / * * 
         * 1. algunas palabras clave no se han añadido 
         * 2. Agregar a la parte superior de la matriz, si es superior a 10 el último se elimina 
         * 3. Agregar a la caché
         * / 
        Var appendFlag = verdadero 
        si ( este .searchHistoryList! == nula && este .searchHistoryList! == indefinido && este .searchHistoryList.length> 0 ) {
           este .searchHistoryList.forEach ( función (CurrentValue, índice) {
             si (= CurrentValue == valor) { 
              appendFlag = falso 
              retorno 
            } 
          }) 
          // 判断-添加
          si (appendFlag === verdadera ) {
             // 长度判断
            si( Esta .searchHistoryList.length> = 10 ) {
               este .searchHistoryList.unshift (valor)
               de este .searchHistoryList.pop () 
            } otro {
               esta .searchHistoryList.unshift (valor) 
            } 
            localStorage.setItem ( '' historyItems, JSON.stringify ( este .searchHistoryList)) 
          } 
        } más {
           este .searchHistoryList = []
           esta .searchHistoryList.push (valor) 
          localStorage.setItem ('' historyItems, JSON.stringify ( este .searchHistoryList)) 
        } 
      }, 
      searchByHistoryKeyWord (elemento) { 
        este .loadTip = ''
         esta .queryData.inputInfo = elemento
         // 查询 
        fetchGetDataByKeyWord (punto) .then (respuesta => {
           // 查询赋值
          este .dataList = response.data.body.data
           si ( este .dataList.length === 0 ) {
             este .loadTip = '没有符合条件数据'
             esta .showHistory () 
          } otro {
            este .loadTip = ''
             esta .showFlag = false 
          } 
        }) 
      } 

}