在vue中实现localStorage

在vue中实现localStorage可以将存储和读取localStorage中变量的值的函数给提取出来，这样就可以实现模块化的思想。如图1是在文件store.js中对localStorage的封装：

完整的代码如下：

//保存数据
export function saveToLocal(id, key, value) {
    //id-商家的id，key-不同的属性名，value-属性名的值
	let seller = window.localStorage.__seller__; //专用字段__seller__
	if (!seller) {
	  //刚开始的时候还没有seller
		seller = {};
		seller[id] = {};
	} else {
	  //如果window.localStorage.__seller__已经有了
    //因为读取的值是字符串的json，所以需要解析成json形式
		seller = JSON.parse(seller);
		if (!seller[id]) {
		  //需要判断seller中是否有属性id，没有的话需要给他进行定义
			seller[id] = {};
		}
	}
	seller[id][key] = value;  //设置不同id下的key的值
  //由于存储只能是字符串的值，需要将JSON转化成字符串的json形式
  //存储的localStorage的变量名是：_seller_
	window.localStorage.__seller__ = JSON.stringify(seller);
};
//读取数据
export function loadFromLocal(id, key, def) {
  //id-商家的id，key-不同的属性名,def-default默认值
	let seller = window.localStorage.__seller__;
	if (!seller) {
	  //如果该变量还没有存储在localStorage中，那么需要返回一个默认值
		return def;
	}
	seller = JSON.parse(seller)[id];
	if (!seller) {
		return def;
	}
	let ret = seller[key];
	return ret || def;
};

然后再要调用的地方将其引进来

这里是在seller.vue中引用这些函数，如下所示：

import {saveToLocal,loadFromLocal} from "../../common/js/store";

在seller.vue中对data()中的变量的声明的时候，调用函数loadFromLocal()，如下所示：

在seller.vue中的触发时机对变量存储，也就是该值变化的时候要重新对它进行存储