Browser application cache localStorage

 

 

Server transfer large amounts of information to the client (browser), even with the server-side caching, each time a user opens web pages need to request server, transfer large amounts of information, and then rendering.

Mainly in the network transmission costs, if we will not likely change a lot of dictionary information stored in localStorage, you can achieve high performance operation.

 

Since localStorage is permanent, there is no expiration date itself, there are some problems which are not synchronized to changes in our dictionary, in addition to the browser user to manually click clear cache, I decided to combine a period localStorage automatically cleared.

 

 

customLocalStorage.js 

. 1  var __localStorage = {
 2      : SET function (Key, value, mins) {
 . 3          IF (! Window.localStorage) { // the browser does not support the following ie8, skip 
. 4              return ;
 . 5          }
 . 6          IF ( typeof (mins) == 'undefined' ) {
 . 7              var Item = {
 . 8                  Data: value
 . 9              };
 10          } the else {
 . 11              var Item = {
 12 is                  Data: value,
 13 is                 endTime: new new a Date () the getTime () * 60 * 1000 + mins.
 14              };
 15          }
 16          localStorage.setItem (Key, the JSON.stringify (Item));
 . 17      },
 18 is      GET: function (Key) {
 . 19          IF ( ! window.localStorage) { // browser does not support direct return null 
20 is              return  null ;
 21 is          }
 22 is          var Val = localStorage.getItem (Key);
 23 is          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 }

 

use

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