• localstorage本地定时缓存


       在做一个网站时,起初直接就是从服务器获取数据进行交互,没有用一些本地缓存做优化,项目做下来就特别卡,并且对服务器造成了很大的压力,经过请教,查询,找到这样一个定时缓存的例子。html5定时缓存,从数据库获取到数据,如果不是实时变化的可以缓存到本地,隔一段时间后再次更新,可以提高网站浏览速度,也可以减少服务器压力。各位看官在做一些项目优化是可以试着应用上这个缓存的功能。

     1 var MyLocalStorage = {
     2               Cache: {
     3                    /**
     4                     * 总容量5M
     5                     * 存入缓存,支持字符串类型、json对象的存储
     6                     * 页面关闭后依然有效 ie7+都有效
     7                     * @param key 缓存key
     8                     * @param stringVal
     9                     * @time 数字 缓存有效时间(秒) 默认60s 
    10                     * 注:localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。不能控制缓存时间,故此扩展
    11                     * */
    12                    put: function(key, stringVal, time) {
    13                         try {
    14                              if(!localStorage) {
    15                                   return false;
    16                              }
    17                              if(!time || isNaN(time)) {
    18                                   time = 60;
    19                              }
    20                              var cacheExpireDate = (new Date() - 1) + time * 1000;
    21                              var cacheVal = {
    22                                   val: stringVal,
    23                                   exp: cacheExpireDate
    24                              };
    25                              localStorage.setItem(key, JSON.stringify(cacheVal)); //存入缓存值 
    26                         } catch(e) {}
    27                    },
    28                    /**获取缓存*/
    29                    get: function(key) {
    30                         try {
    31                              if(!localStorage) {
    32                                   return false;
    33                              }
    34                              var cacheVal = localStorage.getItem(key);
    35                              var result = JSON.parse(cacheVal);
    36                              var now = new Date() - 1;
    37                              if(!result) {
    38                                   return null;
    39                              } //缓存不存在 
    40                              if(now > result.exp) { //缓存过期 
    41                                   this.remove(key);
    42                                   return "";
    43                              }
    44                              return result.val;
    45                         } catch(e) {
    46                              this.remove(key);
    47                              return null;
    48                         }
    49                    },
    50                    /**移除缓存,一般情况不手动调用,缓存过期自动调用*/
    51                    remove: function(key) {
    52                         if(!localStorage) {
    53                              return false;
    54                         }
    55                         localStorage.removeItem(key);
    56                    },
    57                    /**清空所有缓存*/
    58                    clear: function() {
    59                         if(!localStorage) {
    60                              return false;
    61                         }
    62                         localStorage.clear();
    63                    }
    64               } //end Cache 
    65           }
    66           
            //调用缓存函数 67 function getHotList() { 68 try { 69 var cache = MyLocalStorage.Cache.get("cacheKey"); 70 if(cache == null) { 71 $.get("php/timeUpdata.php", function(data) { 72 // result = JSON.parse(data);//字符串转josn串 73 MyLocalStorage.Cache.put("cacheKey", data, 2 * 60); 74 }); 75 } 76 } catch(e) {} 77 } 78 getHotList();

       如果缓存的数据量比较大的话,就需要将数据转换为string格式。

  • 相关阅读:
    软件测试入门知识
    QTP小应用一则
    频分时分波分码分
    解析UML9种图的作用
    OSI七层模型
    暑期实习心得
    0724工作小结 SQL查库是重点
    0723脚本存储过程的学习
    0722工作日志
    工作之余回味了曾经的写过的小说
  • 原文地址:https://www.cnblogs.com/h5kang/p/7831146.html
Copyright © 2020-2023  润新知