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分钟到几小时几天都可，根据业务场景而定）缓存也是个不错的方法