<强> 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的使用