价值 8000 块的本地存储封装

141 阅读1分钟

代码展示:

/**
 * @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;
}

我们在使用本地存储时,因为本地存储只支持字符串类型的数据,所以在存储和获取字符串类型以外的数据时会以下两个问题:

  1. 存储时,会先使用 JSON.stringify() 方法将其转换为JSON数据类型。
  2. 获取时也需要用 JSON.parse() 方法将原本数据类型转换回来。 这样会显得非常繁琐,所以我们可以封装出这样一个本地存储函数库。

代码思想:

  1. 输出打印 localStoragesessionStorage 会发现他们都是 Storage 类型。

  2. 基于他们都是同一个类型对象,所以我们就可以在他们共同的原型对象上添加两个方法,做到一个简单的本地存储封装。

以上就是全部封装代码和封装思想,请大佬们多多包涵。