在vue中实现localStorage

墨蓝 2022-05-25 04:47 285阅读 0赞

**在vue中实现localStorage的思路**：对window.localStorage\[key\]对象进行封装，这样就可以实现模块化的思想（实现window.sessionStorage的思想一样）

如图1是在文件store.js中对localStorage的封装：

![20180508124007655][]

完整的代码如下：

//保存数据
    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()，如下所示：

![20180508124313632][]

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

![20180508124400101][]

[20180508124007655]: /images/20220525/16542929f99148b5a21c435124a791d4.png
[20180508124313632]: /images/20220525/6d50de4ac631437b89c97f9aecef9eaf.png
[20180508124400101]: /images/20220525/829edfd4133e41e09ce32516779a27f6.png