码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器端的缓存localStorage应用

时间:2020-01-10 20:08:13      阅读:72      评论:0      收藏:0      [点我收藏+]

标签: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{
            //渲染
            ........
        }    

 

浏览器端的缓存localStorage应用

标签:data   网络   tst   不同   服务器端   time()   渲染   web   lse   

原文地址:https://www.cnblogs.com/13yan/p/12177650.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!