前几天看到一篇文章【localStorage的黑科技-js和css缓存机制】。

如果把js资源和css资源存储在localStorage中，则可以省去发送http请求所消耗的时间，大大提高用户的浏览体验。
所以，我根据实际业务需要也造了个小轮子。
具体思路如下：
1.后端在页面输出时配置需要加载的文件位置和相关信息。相当于前后端约定的规则 regular_map。

regular_map:{
    "LStest/test1.css":{
        "url":"LStest/test1.css",
        "key":"2a060e9622282822b0cefeabd63b739b077a6aa2"  //校验
    },
    "LStest/test2.css":{
        "url":"LStest/test2.css",
        "key":"bd80775b9681b3b47c180b21883a22bd7ae9d734"
    },
    "LStest/test1.js":{
        "url":"LStest/test1.js",
        "key":"72a87eef9e3a768291c57d81fdd0dc94f692f0f4"
    },
    "LStest/test2.js":{
        "url":"LStest/test2.js",
        "key":"9f4baa42910804513c424b43c497c14e686f1f10"
    },
    "LStest/test.json":{
        "url":"LStest/test.json",
        "key":"860dcce54ba99df55f86a72962ee2b5c0dd0db51"
    },
    "LStest/test.str":{
        "url":"LStest/test.str",
        "key":"2cfa674e9c296e1d941bea9ac1da4d2337c158e1"
    }
}

url为文件地址，key是服务器端将文件内容的进行sha1()运算得到。
2.比对本地缓存是否存在或者是否更新以及是否被浏览器人为篡改。

①判断文件是否存在于本地缓存中。localStorage.getItem(key)
②如果缓存存在则再判断文件路径是否改变path.url
③如果以上条件满足，再判断文件签名是否一致，对本地缓存文件的字符串进行sha1()运算。
④如果以上条件均满足则使用本地缓存文件。否则使用进行请求。
当然进行sha1运算时有消耗的，所以对安全性要求不高的文件，可以不配置key，跳过sha1校验。
3.缓存请求到的文件。
文件请求到后进行本地缓存localStorage.setItem(key,data);
4.运行本地缓存文件。

下图从浏览器中打印的缓存数据

这是一些我个人的想法，欢迎大家拍砖。
一个早上写出来的，并已经部署项目，成功运行。如果有关于代码或者localStorage安全性防护的交流，欢迎大家。