在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,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中的触发时机对变量存储,也就是该值变化的时候要重新对它进行存储
原文地址:https://blog.csdn.net/tangxiujiang
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。