支持过期时间和模块管理前言在前端开发中,localStorage用得比较多。但是原生localStorage的部分功能是不可用的。例如,不能设置每个key的过期时间,localStorage不能由module管理。1.如何使用首先我们来看看如何使用,再来看实现方法:1.传入moduleNameletstorage=newStorage('user');//设置模块名称为userstorage.setItem('name','张三',60*60*24);//过期时间为1天storage.setItem('age',18);storage.clear();//清除所有localStoragestorage.clear('user');//清空模块名user的localStorage2,初始化时没有传入moduleNameletstorage=newStorage();storage.setItem('name','张三',60*60*24,'user');//过期时间为1天,模块名称为userstorage.setItem('name','mac','system');//模块名称是systemstorage.getItem('name','system');//获取模块system下的namestorage.clear('system');//清除模块名系统如果localStorage过期,数据会自动清除,返回状态2。实现代码classStorage{constructor(moduleName){this.moduleName=moduleName;this.storage=localStorage||窗口本地存储;this.status={SUCCESS:0,FAILURE:1,//FailureOVERFLOW:2,//超出限制,localstorage最大支持5M数据(各浏览器略有不同)TIMEOUT:3//Expired};}setItem(键,值){letexpire,moduleName,args=Array.prototype.slice.call(arguments,2);if(args.length>0){//处理参数if(typeofargs[0]=='number'){[expire,moduleName]=args;}else{[moduleName,expire]=args;}}key=this.normalizeKey(key,moduleName);让status=this.status.SUCCESS,data=value;if(!expire&&['[objectObject]','[objectArray]'].indexOf(Object.prototype.toString.call(value))>-1){//没有设置过期时间+是对象还是数组数据=JSON.stringify(值);}elseif(expire){data=JSON.stringify({value,_expireTime_:newDate().getTime()+expire*1000});}尝试{this.storage.setItem(key,data);}catch(e){status=this.status.OVERFLOW;}返回状态;}getItem(key,moduleName){让status=this.status.SUCCESS,data=null;key=this.normalizeKey(key,moduleName);尝试{data=this.storage.getItem(key);}catch(e){status=this.status.FAILURE;}尝试{data=JSON.parse(data);}catch(error){}if(data&&data.value&&data._expireTime_){//设置过期时间if(newDate().getTime()>data._expireTime_){//过期data=null;status=this.status.TIMEOUT;this.storage.removeItem(key)}else{data=data.value;}}return{状态,值:数据};}clear(moduleName){if(moduleName){constkeys=Object.keys(this.storage);keys.forEach(key=>{if(key.indexOf(moduleName+'/')===0){this.storage.removeItem(key);}})}else{this.storage.clear();}}normalizeKey(key,moduleName){让ModuleName=moduleName||这。模块名称;//如果单独设置,则单独设置,否则使用字符串。`);键=字符串(键);}返回`${ModuleName?模块名称+'/':''}${key}`;}}以上是我打包好的localStorage。我希望它可以帮助有需要的人。可以的话请给我点个赞或者收藏一下~最后,我是前端小萌新人周晓阳。我写文章记录自己在日常工作中遇到的问题和学习的内容,以此来提高自己。如果您觉得本文对您有用,请点赞鼓励哟~
