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

2024-12-20 12:56:22

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中,在本地缓存中读写数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

使用vuex缓存数据并优化自己的vuex-cache

需求: 请求接口之后,缓存当前接口的数据,下次请求同一接口时拿缓存数据,不再重新请求添加缓存失效时间 cache使用map来实现 ES6 模块与 CommonJS 模块的差异 CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口. 因为esm输出的是值的引用,直接就是单例模式了详细 export let cache = new Cache() 版本1 思路: 在vuex注册插件,插件会在每次mutatio
解决vue2.x中数据渲染以及vuex缓存的问题

最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记. 在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回... <div class="container&quo
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解

vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置. 最近在项目中遇到这个问题,思考了几套方案,总是不太完善.百度搜到的方案也基本都只能满足一些很简单的需求.对于复杂一些的情况,还是有些不完善的地方.以下是个人对于这种场景的一个摸索,也参考了百度.如有更好的方案,欢迎指出. 缓存组件,vue2中提供了keep-alive.首
vue中,在本地缓存中读写数据的方法

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, comp
Android通过json向MySQL中读写数据的方法详解【读取篇】

本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先要定义几个解析json的方法parseJsonMulti,代码如下: private void parseJsonMulti(String strResult) { try { Log.v("strResult11","strResult11="+strResult); int index=strResult.indexOf("[");
Android通过json向MySQL中读写数据的方法详解【写入篇】

本文实例讲述了Android通过json向MySQL中写入数据的方法.分享给大家供大家参考,具体如下: 先说一下如何通过json将Android程序中的数据上传到MySQL中: 首先定义一个类JSONParser.Java类,将json上传数据的方法封装好,可以直接在主程序中调用该类,代码如下 public class JSONParser { static InputStream is = null; static JSONObject jObj = null; static String j
浅谈Python中的异常和JSON读写数据的实现

异常可以防止出现一些不友好的信息返回给用户,有助于提升程序的可用性,在java中通过try ... catch ... finally来处理异常,在Python中通过try ... except ... else来处理异常一.以ZeroDivisionError为例,处理分母为0的除法异常 def division(numerator,denominator): result=numerator/denominator return result ret1=division(1,5) prin
使用node.js中的Buffer类处理二进制数据的方法

前言在Node.js中,定义了一个Buffer类,该类用来创建一个专门存放二进制数据的缓存区.这篇文章就详细介绍了node.js中的Buffer类处理二进制数据的方法,下面话不多说,来看看详细的介绍. 创建Buffer对象第一种:直接使用一个数组来初始化缓存区 var arr = [0,1,2] var buf = new Buffer(arr) console.log(buf) 执行效果: 第二种:直接使用一个字符串来初始化缓存区 var str = 'hello' var buf = n
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

今天我们使用本地缓存localStorage来实现页面刷新了,验证码倒计时还是和刷新时一样,而不是清零,其次我们可以使用localStorage去实现用户信息缓存,记住密码等等关于缓存的功能,在这里就简单演示一下验证码功能. 一.功能实现话不多说,直接上代码 <template> <button @click="getCode()" :disabled="!show"> <span v-show="show">
Python中Cookies导出某站用户数据的方法

应朋友需要,想将某客户的数据从某站里导出,先去某站搞个账号,建几条数据观察一番,心里有底后开搞. 1.Python环境搭建之前电脑有安装过PyCharm Community 2019.1,具体安装过程就不写了,先跑个HelloWorld,输出正常后正式开整. 2.利用抓包工具或者Google浏览器调试模式拿到请求参数 Cookies参数如下: cookies = { 'JSESSIONID': 'XXX', 'phone': 'XXX', 'password': 'XXX', 'isAuto'
codeigniter中view通过循环显示数组数据的方法

本文实例讲述了codeigniter中view通过循环显示数组数据的方法.分享给大家供大家参考.具体如下: controller如下: <?php class SimpleController extends Controller { function index() { $data['my_list'] = array("do this", "clean up", "do that"); $this->load->view('
微信小程序中使用ECharts 异步加载数据的方法

官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte
angularJs中orderBy筛选以及filter过滤数据的方法

如下所示: <div ng-app="module" ng-controller="ctrl">  {{data|orderBy:'click':true}}<br>  {{data|orderBy:'id':false}}<br>  {{data|filter:'3'}}<br> <

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

相关推荐

随机推荐