当前位置: 首页 > 编程笔记 >

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

席嘉祯
2023-03-14
本文向大家介绍vue中,在本地缓存中读写数据的方法,包括了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, 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中,在本地缓存中读写数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 问题内容: 我有一个不断从网站获取信息并不断更新的程序。到目前为止,我将所有这些信息存储在中,然后在完成后将其写入文本文件。 我需要操纵这些信息;但是,它创建了一个庞大的文本文件,并且我花时间太长,因此无法不断地将信息写入文本文件。因此有人告诉我要研究使用数据库。我曾经使用过的唯一数据库是网站的MySQL数据库,从来没有使用过Java。 有什么办法可以使数据库本地化?就像仅在我的计算机上一样(当我

  • Serenity 提供一些缓存抽象和实用功能让你更容易地使用本地缓存。 术语 本地(local) 的意思是指在本地内存中缓存项目(因此没有涉及到序列化)。 当你的应用程序在网站群(web farm) 中部署时,本地缓存可能还不够或者有时合适。我们将在 分布式缓存 章节中讨论该场景。

  • 问题内容: 我有一些产品数据需要在Redis缓存中存储多个版本。数据是JSON序列化的。获取纯(基本)数据的过程非常昂贵,将其自定义为不同版本的过程也很昂贵,因此我想缓存所有版本以尽可能进行优化。假设自定义基于单个参数,我可以将该参数用作缓存键的一部分。 我计划用来检索产品数据的过程是这样的: 一切都很好,但是我现在正在尝试找出在基础数据源发生更改时使缓存数据无效的最佳方法。如果基本产品信息发生变

  • 我有一些需要在Redis缓存中存储多个版本的产品数据。数据是JSON序列化的。获取普通(基本)数据的过程是昂贵的,将其定制成不同版本的过程也是昂贵的,因此我希望缓存所有版本以尽可能优化。假设定制是基于一个参数的,我可以使用该参数作为缓存键的一部分。 我计划用于检索产品数据的过程如下所示: 所有这些工作都很好,但我现在正在尝试找出当底层数据源更改时使缓存数据无效的最佳方法。如果基本产品信息发生变化,

  • web端的本地缓存可以在Application中查看,那线上小程序的本地缓存在哪里查看呀?

  • 问题内容: 我正在使用MySql DB,并且希望能够读取和写入unicode数据值。例如,法语/希腊语/希伯来语值。 我的客户端程序是C#(.NET Framework 3.5)。 如何配置数据库以允许unicode?以及如何使用C#从MySql读取/写入Unicode值? 更新日期:09年9月7日 好的,因此我的架构,表和列设置为’utf8’+排序规则’utf8_general_ci’。打开连接