标签：data 网络 tst 不同 服务器端 time() 渲染 web lse
服务器传输大量信息到客户端（浏览器），即使有了服务器端缓存，用户每次打开web页面都需要请求服务器，传输大量信息，然后渲染。
主要存在网络传输成本，如果我们将大量的不太会变动的字典信息存储于localStorage，就能实现高性能的操作。
由于localStorage是永久的，自身没有过期时间，这对我们的字典变动存在一些不同步的问题，除了浏览器端用户手动点击清缓存，我打算给localStorage结合一个有效期来自动清除。
customLocalStorage.js
1 var __localStorage = { 2 set : function(key, value, mins){ 3 if(!window.localStorage){//浏览器ie8以下不支持，直接跳过 4 return; 5 } 6 if(typeof(mins) == ‘undefined‘){ 7 var item = { 8 data : value 9 }; 10 }else{ 11 var item = { 12 data : value, 13 endTime : new Date() . getTime() + mins * 60 * 1000 14 }; 15 } 16 localStorage.setItem(key, JSON.stringify(item)); 17 }, 18 get : function(key){ 19 if(!window.localStorage){//浏览器不支持，直接返回null 20 return null; 21 } 22 var val = localStorage.getItem(key); 23 if(!val) return null; 24 val = JSON.parse(val); 25 //判断是否设置过期时间 26 if(typeof(val.endTime) == ‘undefined‘ || (typeof(val.endTime) != ‘undefined‘ && val.endTime > new Date().getTime())){ 27 return val.data; 28 }else{ 29 localStorage.removeItem(key); 30 return null; 31 } 32 }, 33 enable : function () { 34 if(!window.localStorage){ 35 return false; 36 } 37 return true; 38 } 39 }
使用
var emps = __localStorage.get("emps"); if(emps==null){ $.ajax({ url: "/url", type: "post", async: true, success: function (json) { emps = json; //渲染 ........... __localStorage.set("emps", emps,15); }, error: function (jqXHR, textStatus, errorThrown) { mini.showTips({content: jqXHR.responseJSON.message, state: ‘danger‘}); } }); }else{ //渲染 ........ }
标签：data 网络 tst 不同 服务器端 time() 渲染 web lse
原文地址：https://www.cnblogs.com/13yan/p/12177650.html
