vue中,在本地缓存中读写数据的方法


Posted in Javascript onSeptember 21, 2018

1.安装good-storage插件

cnpm i good-storage --save

2.读/写的方法

common/js/cache.js:

import storage from 'good-storage'

const SEARCH_KEY = '__search__'
const SEARCH_MAX_LENGTH = 15

// compare:findindex传入的是function,所以不能直接传val
function insertArray(arr, val, compare, maxLen) {
 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() // 删除末位元素
 }
}

// 存储搜索历史
export function saveSearch(query) {
 let searches = storage.get(SEARCH_KEY, [])
 insertArray(searches, query, (item) => {
 return item === query
 }, SEARCH_MAX_LENGTH)
 storage.set(SEARCH_KEY, searches)
 return searches
}
// 加载本地缓存的搜索历史
export function loadSearch() {
 return storage.get(SEARCH_KEY, [])
}

3.数据用vuex传递

在store/actions.js中写入数据:

import * as types from './mutation-types'
import {saveSearch} from 'common/js/cache'

export const saveSearchHistory = function({commit, state}, query) {
 commit(types.SET_SEARCH_HISTORY, saveSearch(query))
}

4.组件中调用vuex

import {mapActions} from 'vuex'

// methods内:
 saveSearch() {
  this.saveSearchHistory(this.query)
 },
 ...mapActions([
  'saveSearchHistory'
 ])

以上这篇vue中,在本地缓存中读写数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
js下载文件并修改文件名
May 08 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
vue前端工程的搭建
Mar 31 Vue.js
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 #Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 #Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 #Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 #Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 #Javascript
探秘vue-rx 2.0(推荐)
Sep 21 #Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 #Javascript
You might like
如何开始收听短波广播
2021/03/01 无线电
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
Python实现大文件排序的方法
2015/07/10 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
利用python爬取有道词典的方法
2020/12/08 Python
2013年大学生的自我鉴定
2013/10/24 职场文书
品德评语大全
2014/05/05 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
主题团日活动总结
2014/06/25 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
Java 死锁解决方案
2022/05/11 Java/Android