在 localStorage 是 h5 中很好用的功能, 有着比 cookie 更快速且容量更大的特性, 如果频繁的读取和存储数据, 而数据有 json, 有字符串, 就会照成大量代码冗余, 封装一起就看起来好很多
javascript 代码
- /*version 1.0*/
- var local={ get:function(name){
- var o=localStorage.getItem(name)||"";
- if( (o==="") || (o.indexOf("{")<0) && (o.indexOf("[")<0) ){ return o; }else{ return JSON.parse(o); }
- },
- set:function(name,val){
- val=typeof(val)==="object"?JSON.stringify(val):val; localStorage.setItem(name,val);
- },
- clear:function(name){
- localStorage.removeItem(name);
- }
- };
而有时候我们在项目开发中经常遇到一个数据仅需要保存一段时间, 这时候使用 localStorage 就不能轻易满足需求了, 那么是不是可以对存取过程做一下修改, 使它像 cookie 那样设定过期时间呢, 是的, 借鉴 cookie 的存储过程是一个不错的选择
javascript 代码
- /*version 2.0*/
- var local={
- get:function(name){
- var o=localStorage.getItem(name)||"", cut=o.indexOf(';expiretime=');
- var exp=o.substring(cut), val=o.substring(0, cut<0?o.length:cut)
- if(exp){
- exp=exp.substring(12);
- if(exp<this.time()){ local.clear(name);return ''; }else{ return this.back(val) }
- }else{
- return this.back(val)
- }
- },
back:function(val){[封装 localStorage 实现自定义缓存过期 - TEEMO](https://zhuanlan.zhihu.com/p/31298535)
- if( (val==="") || (val.indexOf("{")<0) && (val.indexOf("[")<0) ){ return val; }else{ return JSON.parse(val); }
- },
- set:function(name, val, sec){
- val=typeof(val)==="object"?JSON.stringify(val):val;
- if(sec){val+=';expiretime='+(this.time()+sec*1000)}
- localStorage.setItem(name,val);
- },
- clear:function(name){
- localStorage.removeItem(name);
- },
- time:function(){
- return Date.parse(new Date())
- }
- };
这样就可以在使用 local.set(key, val, expiretime) 来设定过期时间, 当然这样的程序也有 bug, 就是过于依赖设备时间, 私认为这个小问题无需过于纠结, 瞻前顾后反而拖累自己.
知乎专栏地址封装 localStorage 实现自定义缓存过期 - TEEMO https://zhuanlan.zhihu.com/p/31298535
来源: http://www.qdfuns.com/article/15651/0fdd5c3e297e7a32a34d2318860e4c09.html