浏览器端的缓存localStorage应用

Posted 2021-03-17 13yan

 

 

服务器传输大量信息到客户端（浏览器），即使有了服务器端缓存，用户每次打开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{
            //渲染
            ........
        }