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

本文共 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

你可能感兴趣的文章
看板中的WIP限制思想
查看>>
构造函数(constructor)与原型链(prototype)关系
查看>>
The project you were looking for could not be found
查看>>
华为云携手秒拍,云+AI助力短视频加速发展
查看>>
罗辑思维在全链路压测方面的实践和工作笔记
查看>>
人工智能深度学习Caffe框架介绍,优秀的深度学习架构
查看>>
如何将qlv格式倚天屠龙记转换为MP4格式
查看>>
最全的MAC端截图工具推荐,寻找适合自己的截图工具
查看>>
使用 nginx 同域名下部署多个 vue 项目,并使用反向代理
查看>>
Python基本数据类型之元组
查看>>
LeetCode-数组-删除有序数组重复元素
查看>>
我所理解的原型&原型链
查看>>
工作三年,我要如何提升Java技术 | 粉丝提问
查看>>
JavaScript 如何使用闭包
查看>>
React 教程:快速上手指南
查看>>
6 个理由,让我不顾一切撑腰 Python!
查看>>
[ 一起学React系列 -- 11 ] React-Router4 (1)
查看>>
在Java中使用redisTemplate操作缓存
查看>>
Generator函数的语法以及异步的应用
查看>>
使用 qrcodejs 生成二维码的几个问题
查看>>