代码展示:
/**
* @function 用于设置store数据
* @param {String} key - 获取的 key 值
* @param {any data} data - 存入的内容
*/
Storage.prototype.set = function(key,data){
this.setItem(key,JSON.stringify(data));
}
/**
* @function 用于获取store中的数据
* @param {String} key - 获取的 key 值
* @param {any data} val - 默认值
* @return {any data} - 返回获取的数据
*/
Storage.prototype.get = function(key,val = null){
return JSON.parse(this.getItem(key)) || val;
}
我们在使用本地存储时,因为本地存储只支持字符串类型的数据,所以在存储和获取字符串类型以外的数据时会以下两个问题:
- 存储时,会先使用
JSON.stringify()
方法将其转换为JSON数据类型。- 获取时也需要用
JSON.parse()
方法将原本数据类型转换回来。 这样会显得非常繁琐,所以我们可以封装出这样一个本地存储函数库。
代码思想:
-
输出打印
localStorage
和sessionStorage
会发现他们都是Storage
类型。 -
基于他们都是同一个类型对象,所以我们就可以在他们共同的原型对象上添加两个方法,做到一个简单的本地存储封装。
以上就是全部封装代码和封装思想,请大佬们多多包涵。