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 //设置缓存到本地的数据最大缓存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){
    // console.log(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="login">
        <div class="logohead">
            <van-image round width="8rem" height="8rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </div>
        <!-- //搜索框 -->
        <div class="search">
            <van-search v-model="searchtxt" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel" @clear="onclear"
             @focus="change" show-action />
        </div>
        <div v-show="historyxs">
            <!-- //热门搜索 -->
            <div>热门搜索</div>
            <div class="popularSearch">
                <div class="class" v-for="(item,index) in popularSearch" @click="clickPopular(item)">
                    {{item}}
                </div>
            </div>
            <!-- 历史记录 -->
            <ul class="his_ulcon">
                <li @click="del(item,index)" v-for="(item,index) in list"> {{item}} </li>
                <p @click="clearhis()">清空历史记录</p>
            </ul>
        </div>
    </div>
</template>

<script>
    import {
        saveSearch
    } from '@/assets/js/cache.js' //引用本地存储js
    import storage from 'good-storage' //引入good-storage包
    export default {
        // 采用了vant-ui
        data() {
            return {
                searchtxt: '',
                historyxs: true, //历史记录显示与不显示控制
                list: [], //近期搜索历史记录
                popularSearch: ["口腔溃疡", "痔疮", "麻疹", "肺炎", "新冠"],//这个热门搜索数据后台会返回的，这里先模拟写死
            }
        },
        methods: {
            //提交搜索，回车时执行
            onSearch() {
                console.log(this.searchtxt)
                if (this.searchtxt != '') { //搜索框不为空
                    saveSearch(this.searchtxt); // 本地存储搜索的内容
                    // this.historyxs = false;
                    this.searchtxt = '';
                    this.change() //重新获取历史记录数组
                }
            },
            // 点击热门搜索,把点击的添加进去到历史记录
            clickPopular(row) {
                saveSearch(row); // 本地存储搜索的内容
            },
            //取消搜索
            onCancel() {
                console.log(this.searchtxt)
            },
            //清除搜索
            onclear() {
                console.log(11111)
                console.log(this.searchtxt)
            },
            //获取焦点的时候
            change() {
                console.log(11111)
                this.list = storage.get('_search_'); //输入框获取焦点显示搜索历史记录 
                console.log(this.list)
            },
            //删除指定历史记录 一般是做成长按删除
            del(row, index) {
                console.log(row)
                console.log(this.list)
                this.list.splice(index, 1);
                storage.remove('_search_');
                for (let i = 0; i < this.list.length; i++) {
                    console.log(this.list[i])
                    saveSearch(this.list[i]); // 本地存储搜索的内容
                }
            },
            //清空历史记录
            clearhis() {
                storage.remove('_search_');
                this.list = []
            },
        },
        watch: {
            //监听输入内容向后台请求数据
            'searchtxt': function() {
                console.log('数据改变触发相应事件');
            }
        },
    }
</script>

<style lang="scss" scoped="scoped">
    .login {
        width: 750px;
        .popularSearch {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;

            .class {
                background: skyblue;
            }
        }
    }
</style>