博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-搜索页-搜索历史本地存储-good-storage
阅读量:5752 次
发布时间:2019-06-18

本文共 1807 字,大约阅读时间需要 6 分钟。

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

 

转载于:https://www.cnblogs.com/catbrother/p/9203569.html

你可能感兴趣的文章
你所不知的Webpack-多种配置方法
查看>>
webpack+typescript+threejs+vscode开发
查看>>
python读excel写入mysql小工具
查看>>
如何学习区块链
查看>>
搜索问题的办法
查看>>
微信分销系统商城营销5大重点
查看>>
求职准备 - 收藏集 - 掘金
查看>>
Linux-Centos启动流程
查看>>
php 设计模式
查看>>
后端技术精选 - 收藏集 - 掘金
查看>>
Laravel 服务容器
查看>>
mac安装kubernetes并运行echoserver
查看>>
多页架构的前后端分离方案(webpack+express)
查看>>
算法(第4版) Chapter 1
查看>>
前端技术选型的遗憾和经验教训
查看>>
“亲切照料”下的领域驱动设计
查看>>
SRE工程师到底是做什么的?
查看>>
解读:Red Hat为什么收购Ansible
查看>>
Ossim下的安全合规管理
查看>>
DelphiWebMVC框架下BPL热部署实现
查看>>