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>