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