将js、css和图片缓存写入到localStorage中

js css 图片 前端 缓存

文件下载：localFile.js

我们可以把js、css和一些雪碧图片等等公共资源缓存在本地客户端中，虽然可以利用nginx来实现，如果能使用前端来使用无疑更是高效快捷为服务器减轻负担。

引入：

<script src="js/localFile.js" version=12></script>  //修改版本可以清除缓存

加载css：

<script>loadCss("style.css")</script>

加载项目js:

<script>eval(loadJs("js/jquery.js"));</script>

加载图片：

<img lsrc="img/top.png" src="" onerror="loadImg(this)" class="top" >

首次加载页面js css img同样也会去服务器请求资源，但是第二次在加载就从本地中快速加载了。

原理：

js和css都是通过ajax同步的方法把数据写入到localStorage，又使用同步的方法把数据返回给前端，
使用同步的方法是为了保证执行的顺序；
img也是使用ajax去请求把数据写入到localStorage中，但使用的是异步的方法。

来源地址：http://www.jianshu.com/p/601693d22076

参考：http://blog.csdn.net/a497785609/article/details/48321405

注意：经过测试存在以下bug

1，没有对低版本的浏览器做localStorage判断，如IE

2，在IE浏览器中js、css加载正常但是图片无法加载出来。

本人会在后面把两个bug，待续…