Atitit 利用前端cache indexdb localStorage 缓存提升性能优化attilax总结 1.1. indexdb 更加强大点，但是结果测试，api比较繁琐 使用叫麻烦些 1

Atitit 利用前端cache indexdb localStorage 缓存提升性能优化attilax总结

 

1.1. indexdb 更加强大点，但是结果测试，api比较繁琐 使用叫麻烦些 1

1.2. localStorage比较简单易用 就setitem getitem就可以了 1

1.3. 效果：结合gzip，将门诊首页加载数据量从9M降低到300kb 1

1.4. 代码范例 1

1.5. 缓存的刷新清理问题 直接清理浏览器缓存或F12后找到localStorage清理条目 2

 

1.1. indexdb 更加强大点，但是结果测试，api比较繁琐 使用叫麻烦些

 

1.2. localStorage比较简单易用 就setitem getitem就可以了

localStorage.getItem

资料上说有个5M存储容量限制，实际测试貌似没有 可能浏览器拓展了

 

 

1.3. 效果：结合gzip，将门诊首页加载数据量从9M一路降低到300kb

 

1.4. 代码范例

 

//ati  yibaoJibingList_ajax_ret=localStorage.getItem( 'yibaoJibingList_ajax_ret'  ); if(yibaoJibingList_ajax_ret) { yibaoJibingList = yibaoJibingList_ajax_ret.list; } if(!yibaoJibingList_ajax_ret) { //加载新开页面的医保疾病列表 $.ajax({url:rootUrl+"/treatment/yibaoJibingList",data:{params:JSON.stringify({corporationid:yiyuanId})},dataType:'json',type:'get', success:function(data){if(data) { //ati  yibaoJibingList = data.list; localStorage.setItem( 'yibaoJibingList_ajax_ret',data  ); }}});   //jeig ajax end } //ati end

 

 

 

1.5. 缓存的刷新清理问题 直接清理浏览器缓存或F12后找到localStorage清理条目

也可以增加一些清理缓存的按钮，方便用户使用

 

定时刷新（从10分钟到几小时几天都可，根据业务场景而定）缓存也是个不错的方法