Storage 封装

Cookie、localStorage、sessionStorage 三者区别

• 存储大小：Cookie4K、Storage5M
• 有效期：Cookie 拥有有效期，Storage 永久存储
• Cookie 会发送到服务器端，存储在内存中，Storage 只存储在浏览器端
• 路径：Cookie 有路径限制，Storage 只存储在域名下
• API：Cookie 没有特定的API，Storage 有对应的API

为什么要封装 Storage

• Storage 本身有API，但是知识简单的key/value 形式
• Storage 只存储字符串，需要人工转换成 json 对象
• Storage 只能一次性清空，不能单个清空

示例

// Storage 封装
const STORAGE_KET = 'mall'
export default {
    
    
  // 存储值
  setItem (key,value,module_name) {
    
    
    if (module_name) {
    
    
      let val = this.getItem(module_name);
      val[key] = value;
      this.setItem(module_name, val);
    }else{
    
    
      let val = this.getStorage();
      val[key] = value;
      window.sessionStorage.setItem(STORAGE_KET,JSON.stringify(val))
    }
    let val = this.getStorage();
    val[key] = value;
    window.sessionStorage.setItem(STORAGE_KET,JSON.stringify(val))
  },
  // 获取某一个模块下面的属性 user 下面的 userName
  getItem (key,module_name) {
    
    
    if (module_name){
    
    
      let val = this.getItem(module_name);
      if(val) return val[key];
    }
    this.getStorage()[key]
  },
  getStorage () {
    
    
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KET) || '{}')
  },
  clear (key,module_name) {
    
    
    let val = this.getItem();
    if(module_name){
    
    
      delete val[module_name][key];
    }else{
    
    
      delete val[key];
    }
    this.setItem(STORAGE_KET,val)
  }
}