Storage的封装

最新推荐文章于 2024-06-13 16:30:51 发布

小牲口online

最新推荐文章于 2024-06-13 16:30:51 发布

阅读量668

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发 Javascript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/M_Edison/article/details/115712374

前端开发同时被 2 个专栏收录

29 篇文章

订阅专栏

Javascript

24 篇文章

订阅专栏

本文档详细介绍了如何封装浏览器的Storage，以解决其只能存储字符串、无法单独清除条目等问题。通过封装的方法，可以方便地存储和管理JSON对象，并提供了设置、获取、清除存储值的功能。示例代码展示了具体的实现和使用方式，便于在项目中统一管理和操作Storage。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要封装storage：

Storage本身虽然有Api，但是只是简单的键值对的形式
Storage只能存储字符串，需要人工转换成json对象
Storage只能一次性清空，不能单个清空
我们通常在Storage中存储json对象，因此我们需要自己封装Storage方法。

/* 
Storage封装
*/
const STORAGE_KEY = 'mall';
export default {
  // 存储值
  setItem(key, value, modules_name) {
    if (modules_name) {
      var all = this.getItem(modules_name)
      all[key] = value;
      // 这里递归本方法将modules_name作为key(已有),再将当前添加进去的all放进此module_name中,此时的val就包含了所有值，最后直接添加即可
      this.setItem(modules_name, all)
    } else {
      //只传入两个参数：
      let val = this.getStorage();
      console.log(val);
      val[key] = value;
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
    }
  },
  /*
  获取值(可以传入一个值也可传入两个值)
  一个参数：没有moudle直接单对象
  一个参数：获得moudle下的key对应的对象
  */
  getItem(key, modules_name) {
    if (modules_name) {
      let val = this.getItem(modules_name);
      if (val) return val[key]
    }
    return this.getStorage()[key];
  },
  // 获取整个数据(转为json格式):将数据转换为json格式。
  getStorage() {
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
  },
  // 删除某一个值
  clear(key, modules_name) {
    let val = this.getStorage();
    if (modules_name) {
      delete val[modules_name][key]
    } else {
      delete val[key]
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  }
}

使用方法：

// console.log(storage.getStorage());
// storage.setItem('a',1);
// storage.setItem('address','北京','person');
// storage.setItem('abc',{data:88},'person');
storage.clear('a')

这样我们可以将整个项目中使用的storage全部放在一个key/value中，在value中存放所有的data，使用json的形式存储