在做一个网站时,起初直接就是从服务器获取数据进行交互,没有用一些本地缓存做优化,项目做下来就特别卡,并且对服务器造成了很大的压力,经过请教,查询,找到这样一个定时缓存的例子。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格式。