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中利用数组实现的循环队列代码
Jan 24 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
js 解析 JSON 数据简单示例
Apr 21 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
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP实现简易blog的制作
2016/10/24 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
javascript 常用功能总结
2012/03/18 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
python执行get提交的方法
2015/04/29 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python 调用HBase的简单实例
2016/12/18 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python制作exe文件简单流程
2019/01/24 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
详解爬虫被封的问题
2019/04/23 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Sony C++笔试题
2013/03/10 面试题
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
建设工程授权委托书
2014/09/22 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
python实战之90行代码写个猜数字游戏
2021/04/22 Python
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python