浏览器端的缓存localStorage应用

 

 

服务器传输大量信息到客户端（浏览器），即使有了服务器端缓存，用户每次打开web页面都需要请求服务器，传输大量信息，然后渲染。

主要存在网络传输成本，如果我们将大量的不太会变动的字典信息存储于localStorage，就能实现高性能的操作。

 

由于localStorage是永久的，自身没有过期时间，这对我们的字典变动存在一些不同步的问题，除了浏览器端用户手动点击清缓存，我打算给localStorage结合一个有效期来自动清除。

 

 

customLocalStorage.js 

var __localStorage = {
    set : function(key, value, mins){
        if(!window.localStorage){//浏览器ie8以下不支持，直接跳过
            return;
        }
        if(typeof(mins) == 'undefined'){
            var item = {
                data : value
            };
        }else{
            var item = {
                data : value,
                endTime : new Date() . getTime() + mins * 60 * 1000
            };
        }
        localStorage.setItem(key, JSON.stringify(item));
    },
    get : function(key){
        if(!window.localStorage){//浏览器不支持，直接返回null
            return null;
        }
        var val = localStorage.getItem(key);
        if(!val) return null;
        val = JSON.parse(val);
        //判断是否设置过期时间
        if(typeof(val.endTime) == 'undefined' || (typeof(val.endTime) != 'undefined' && val.endTime > new Date().getTime())){
            return val.data;
        }else{
            localStorage.removeItem(key);
            return null;
        }
    },
    enable : function () {
        if(!window.localStorage){
            return false;
        }
        return true;
    }
}

 

使用

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