localStorage.getItem(key):获取指定key本地存储的值
 localStorage.setItem(key,value)：将value存储到key字段
 
详细地址：客户端存储 — Vue.js

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

**
 
// 定义一个点击下载事件
 
**
 
 
完成后就可以吧列表导入的base64位数据流转化位表格的形式，并且下载导出。

数据存本地js方法文件
 
const local =  {}
/**
 * put 把数据放到本地存储
 * @param {*} key
 * @param {*} value
 */
local.set = function (key, value) {
  window.localStorage.setItem(key, JSON.stringify(value));
};
/**
 * get 获取本地存储数据
 * @param {*} key
 */
local.get = function (key) {
  var obj = window.localStorage.getItem(key);
  if (obj && obj != 'undefined' && obj != 'null') {
    return JSON.parse(obj);
  }
  return '';
};
/**
 * remove 清除本地数据
 * @param {*} key
 */
local.remove = function (key) {
  if (key) {
    window.localStorage.removeItem(key);
  } else {
    for (var i in arguments) {
      window.localStorage.removeItem(arguments[i]);
    }
  }
};
/**
 * seek 检查本地是否有值
 * @param {*} key
 */
 local.seek = function (name) {
   if (!name) return;
   return window.localStorage.hasOwnProperty(name)
 }

export default local
 
我以Vue项目为参考做事例，若其他文件需要引用，则在其它页面按需引入即可。
 
import local from "../../libs/local";  //依据自己页面实际路径为准
 
接下来展示如何使用
 
//数据存储本地
local.set("areaDatas", data); //其中"areaDatas"为key，data为value
//数据从本地取出
local.get("areaDatas");
//数据从本地清除
local.remove('areaDatas');
 
接下来为大家展示一个我所遇到的坑，当你想存一个ES6中的map去本地的话，计算机并不会如你所愿，你按照刚刚的做法得到的value将会是undefined
 
click_areaCodeList() {
      let param = {
        getAll: 1
      };
      areaCodeList(param)
        .then(resp => {
          if (resp.data) {
            let data = resp.data.data;
            let map = new Map();
            for (let i = 0; i < data.length; i++) {
              let key = map.get(data[i].code);
              if (key == undefined) {
                let arr = [];
                arr.push(data[i].province, data[i].city, data[i].district);
                map.set(data[i].code, arr);
              } else {
                key.push(data[i].code);
                map.set(data[i].code, key);
              }
            }
            local.set(
              "xzqbmChangeList",
              JSON.stringify(Array.from(map.entries()))  //你得这样才能存进去
            );
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
 
接下来就是取了，也有一点变化
 
this.xzqbmChangeList = new Map(JSON.parse(local.get("xzqbmChangeList")));
 
既然说到了Map，就为大家简单过一下map的添加键和读取值吧
 
ES6之Map小解
 
var myMap = new Map();
 
var keyObj = {},
    keyFunc = function () {},
    keyString = "hzq";
 
// 添加键
myMap.set(keyString, "和键'hzq'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");
 
myMap.size; 
 
// 读取值
myMap.get(keyString);    // "和键'hzq'关联的值"
myMap.get(keyObj);       // "和键keyObj关联的值"
myMap.get(keyFunc);      // "和键keyFunc关联的值"
 
myMap.get("hzq");        // "和键'hzq'关联的值"
                         // 因为keyString === 'hzq'
myMap.get({});           // undefined, 因为keyObj !== {}
myMap.get(function() {}) // undefined, 因为keyFunc !== function () {}
 
最后说个小知识，如果你在不同页面向本地存储数据时，想存在一个对象里，你可以如下操作，
 
//先从本地获取原有数据，如：
_this.adressDatas = local.get('adressDataInfo');
//然后在需要的地方定义一个新对象，如：var obj = {}  
var obj = {..._this.adressDatas,...{
    bussAdress:_this.bussAdressAll.bussAdress,//企业地址
    bussAdressId:_this.bussAdressAll.bussAdressId,//企业地址id
    detailed:_this.bussAdressAll.detailed,//详细地址
   	userName:_this.bussAdressAll.userName,  //联系人姓名
    contactPhone:_this.bussAdressAll.contactPhone, //联系电话
    userEmail:_this.bussAdressAll.userEmail  //联系人邮箱
    }}
    // 写好后在把它存入本地，
    local.set('adressDataInfo',obj)
    //这样的话，本地中的数据都保存在这个adressDataInfo键值value下。
 
本文章为原创，若转载请注明出处，喜欢的朋友请给个关注，谢谢