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实现Sleep暂停功能代码
Sep 03 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
Vue-Router的使用方法
Sep 05 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
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
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP经典面试题集锦
2015/03/19 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
Javascript 中的 && 和 || 使用小结
2010/04/25 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
python学习 流程控制语句详解
2016/06/01 Python
python连接mysql实例分享
2016/10/09 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
python datetime处理时间小结
2020/04/16 Python
python开发入门——列表生成式
2020/09/03 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
高一历史教学反思
2014/01/13 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
初三毕业评语
2014/12/26 职场文书
谢师宴答谢词
2015/01/05 职场文书
本溪水洞导游词
2015/02/11 职场文书
紧急通知
2015/04/17 职场文书
如何撰写促销方案?
2019/07/05 职场文书