Vue数据存储本地 localStorage ES6-Map 存本地Value未定义

数据存本地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下。

本文章为原创，若转载请注明出处，喜欢的朋友请给个关注，谢谢