详解Vue中localstorage和sessionstorage的使用

  

<强> 1。项目使用中暴露出来的几个问题

  

大家到处直接使用localstorage [' aaa ']='这是一段示例字符串”这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多
  

  

项目很大,那么大家起的关键的名字难免会重复,而且这样也会造成全局污染
  

  

因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用
  

  

<强> 2。解决办法

  

封装存储的使用方法,统一处理
  

  

规范存储的键值的命名规则
  规范存储的使用规范
  

  

2.1。封装统一的方法

  

封装成方法可以降低耦合度,可以方便切换实现方式,可以控制存储量大小
  

  

改变实现可以通过配置不同的参数来实现
  

  

编辑如图所示的项目结构
  

  

代码实现

     /*   * storage.js   *//*   * @Author:石国庆   * @Desc:本地数据存储方法封装   * @Date: 2017.11.14   * @Ref:   * https://github.com/WQTeam/web-storage-cache   * https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage   * @Explain:为了不新对象,只能多写几遍   * @Example:   *   * 1,LocalStorage的使用   *从“@/跑龙套/storage.js”进口存储   * storage.setItem (“shiguoqing0”, [1, 2, 3, 4, 5, 6))   * storage.setItem (shiguoqing1,{标识:“dfdf”,令牌:11232323})   * storage.setItem (“shiguoqing2”、“dfdfdf”)   * console.log (storage.getItem (shiguoqing0))   * console.log (storage.getItem (shiguoqing1))   * console.log (storage.getItem (shiguoqing2))   * storage.removeItem (“shiguoqing2”)   *   *   * 2,SessionStorage的使用   * storage.setItem (“shiguoqing0”,[1、2、3、4、5、6),{类型:“会话”})   *   * *///TODO:其他方法的实现//TODO:超时时间的设置/*   *方法实现   * */从“进口当地。/存储/localstorage.js”   从“进口会话。/存储/session.js”   从“进口饼干。/存储/cookies.js”   从“进口json。/存储/json.js”/*   *函数体   * */让存储={   配置:{   类型:“当地”,//本地会话,饼干,json   到期:新日期().getTime () + 100 * 24 * 60 * 60 * 1000   },   getStorage(选项){   让配置={}   如果(选项){   配置=Object.assign ({}, this.config选项)   其他}{   配置=this.config   }   返回this.createStorage (config.type)   },   createStorage(名字){   开关(名字){   情况下“当地”:返回当地;打破   例“会话”:会话返回;打破   情况下“饼干”:返回饼干;打破   案例的json:返回json,打破   }   },   getItem(关键、期权){   让商店=this.getStorage(选项)   返回store.getItem(关键)   },   setItem(价值,关键选项){   让商店=this.getStorage(选项)   store.setItem(关键字,值)   },   removeItem(关键、期权){   让商店=this.getStorage(选项)   store.removeItem(关键)   },   getAll () {},   明确(选项){   让商店=this.getStorage(选项)   store.clear ()   },   键(n) {},   长度(){},   (关键){},   forEach (cb) {},   deleteAllExpires () {},//获取最大存储空间:只有LocalStorage SessionStorage和可以使用这个方法   getMaxSpace(选项){   让商店=this.getStorage(选项)   store.getMaxSpace ()   },//获取使用了的空间:只有LocalStorage SessionStorage和可以使用这个方法   getUsedSpace(选项){   让商店=this.getStorage(选项)   store.getUsedSpace ()   }   }   出口默认存储//https://segmentfault.com/a/1190000002458488//5、遍历localStorage存储的关键//. length数据总量,例:localStorage.length//ey(索引)获取钥匙,例:var关键=localStorage.key(指数);//备注:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5米。//超时设置//函数(圣、关键值,到期){//如果(圣==' l ') {//圣=window.localStorage;//=到期届满| | 60;//其他}{//圣=window.sessionStorage;//=到期届满| | 5;//}//如果(typeof价值!=ㄒ濉?{//{试//返回st.setItem(键,JSON.stringify ({//数据:值,//到期:新的日期().getTime() + 60 * 1000 *到期//}));//}捕捉(e) {}//其他}{//var结果=JSON.parse (st.getItem(关键)| |“{}”);//如果结果,,新的日期().getTime () & lt;result.expires) {//返回result.data;//其他}{//st.removeItem(关键);//返回null;//}//}//}

详解Vue中localstorage和sessionstorage的使用