在vue中实现localStorage的思路:对window.localStorage[key]对象进行封装,这样就可以实现模块化的思想(实现window.sessionStorage的思想一样)
如图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中的触发时机对变量存储,也就是该值变化的时候要重新对它进行存储