【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知 - 叶小钗(5)_H5之家

1 define([], function () { Storage = _.inherit({ propertys: function () { .sProxy = window.localStorage; .defaultLifeTime = 2592000000; .keyCache = 'SYSTEM_KEY_TIMEOUT_MAP'; .removeNum = 5; 18 19 }, 20 21 assert: function () { 22 if (this.sProxy === null) { 23 throw 'not override sProxy property'; 24 } 25 }, 26 27 initialize: function (opts) { 28 this.propertys(); 29 this.assert(); 30 }, 新增localstorage 34 数据格式包括唯一键值，json字符串，过期日期，存入日期 35 sign 为格式化后的请求参数，用于同一请求不同参数时候返回新数据，比如列表为北京的城市，后切换为上海，会判断tag不同而更新缓存数据，tag相当于签名 36 每一键值只会缓存一条信息 set: function (key, value, timeout, sign) { 39 var _d = new Date(); indate = _d.getTime(); entity = null; (!timeout) { 47 _d.setTime(_d.getTime() + this.defaultLifeTime); 48 timeout = _d.getTime(); 49 } 50 51 // 52 this.setKeyCache(key, timeout); 53 entity = this.buildStorageObj(value, indate, timeout, sign); { 56 this.sProxy.setItem(key, JSON.stringify(entity)); ; 58 } catch (e) { (e.name == 'QuotaExceededError') { (!this.removeLastCache()) throw '本次数据存储量过大'; 64 this.set(key, value, timeout, sign); 65 } 66 console && console.log(e); 67 } ; 69 }, removeOverdueCache: function () { 73 var tmpObj = null, i, len; now = new Date().getTime(); cacheStr = this.sProxy.getItem(this.keyCache); 78 var cacheMap = []; 79 var newMap = []; 80 if (!cacheStr) { 81 return; 82 } 83 84 cacheMap = JSON.parse(cacheStr); (i = 0, len = cacheMap.length; i < len; i++) { 87 tmpObj = cacheMap[i]; 88 if (tmpObj.timeout < now) { 89 this.sProxy.removeItem(tmpObj.key); 90 } else { 91 newMap.push(tmpObj); 92 } 93 } 94 this.sProxy.setItem(this.keyCache, JSON.stringify(newMap)); 95 96 }, 97 98 removeLastCache: function () { 99 var i, len; 100 var num = this.removeNum || 5; cacheStr = this.sProxy.getItem(this.keyCache); 104 var cacheMap = []; 105 var delMap = []; (!cacheStr) return false; 109 110 cacheMap.sort(function (a, b) { 111 return a.timeout - b.timeout; 112 }); delMap = cacheMap.splice(0, num); 116 for (i = 0, len = delMap.length; i < len; i++) { 117 this.sProxy.removeItem(delMap[i].key); 118 } .sProxy.setItem(this.keyCache, JSON.stringify(cacheMap)); ; 122 }, 123 124 setKeyCache: function (key, timeout) { 125 if (!key || !timeout || timeout < new Date().getTime()) return; 126 var i, len, tmpObj; oldstr = this.sProxy.getItem(this.keyCache); 130 var oldMap = []; flag = false; 133 var obj = {}; 134 obj.key = key; 135 obj.timeout = timeout; (oldstr) { 138 oldMap = JSON.parse(oldstr); 139 if (!_.isArray(oldMap)) oldMap = []; 140 } (i = 0, len = oldMap.length; i < len; i++) { 143 tmpObj = oldMap[i]; 144 if (tmpObj.key == key) { 145 oldMap[i] = obj; 146 flag = true; 147 break; 148 } 149 } 150 if (!flag) oldMap.push(obj); .sProxy.setItem(this.keyCache, JSON.stringify(oldMap)); 153 154 }, 155 156 buildStorageObj: function (value, indate, timeout, sign) { 157 var obj = { 158 value: value, 159 timeout: timeout, 160 sign: sign, 161 indate: indate 162 }; 163 return obj; 164 }, 165 166 get: function (key, sign) { 167 var result, now = new Date().getTime(); 168 try { 169 result = this.sProxy.getItem(key); ; 171 result = JSON.parse(result); (result.timeout < now) return null; (sign) { 178 if (sign === result.sign) 179 return result.value; ; 181 } else { 182 return result.value; 183 } 184 185 } catch (e) { 186 console && console.log(e); 187 } ; 189 }, getSign: function (key) { 193 var result, sign = null; 194 try { 195 result = this.sProxy.getItem(key); 196 if (result) { 197 result = JSON.parse(result); 198 sign = result && result.sign 199 } 200 } catch (e) { 201 console && console.log(e); 202 } 203 return sign; 204 }, 205 206 remove: function (key) { .sProxy.removeItem(key); 208 }, 209 210 clear: function () { 211 this.sProxy.clear(); 212 } 213 }); 214 215 Storage.getInstance = function () { 216 if (this.instance) { .instance; 218 } else { .instance = new this(); 220 } 221 }; Storage; 224 225 });

storage

真实的使用场景业务model首先得做一层业务封装，然后才是真正的使用：