Web移动端使用localStorage缓存Js和css文件

                  将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间，下面的代码可以实现此功能：

[javascript] view plain copy

print?

1. <script type="text/javascript">  
2.        //入口函数  
3.                if (window.localStorage) {  
4.                    initJs();  
5.                    initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css");  
6.                } else {  
7.                    addFile("/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", "js");  
8.                    addFile("/gfdzp201508257998/Turntable/Script/whir.turntable.js", "js");  
9.                    addFile("/gfdzp201508257998/Turntable/Style/css_whir.css", "css");  
10.                }  
11.   
12.   
13.        //第一步：加载页面js：先加载jQuery后加载用户脚本  
14.        function initJs() {  
15.            var name = "jquery";  
16.            var url = "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js";  
17.            var xhr;  
18.            var js = window.localStorage ? localStorage.getItem(name) : "";  
19.            if (js == null || js.length == 0) {  
20.                if (window.ActiveXObject) {  
21.                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
22.                } else if (window.XMLHttpRequest) {  
23.                    xhr = new XMLHttpRequest();  
24.                }  
25.                xhr.open("GET", url);  
26.                xhr.send(null);  
27.                xhr.onreadystatechange = function () {  
28.                    if (xhr.readyState == 4 && xhr.status == 200) {  
29.                        js = xhr.responseText;  
30.                        localStorage.setItem(name, js);  
31.                        js = js == null ? "" : js;  
32.                        addTxt(js, "js");  
33.                        initTurntable(); //确保先引用Jquery  
34.                    }  
35.                };  
36.            } else {  
37.                addTxt(js, "js");  
38.                initTurntable();  
39.            }  
40.        }  
41.   
42.        //加载自定义脚本  
43.        function initTurntable() {  
44.            var name = "turntable";  
45.            var url = "/gfdzp201508257998/Turntable/Script/whir.turntable.js";  
46.            var xhr;  
47.            var js = window.localStorage ? localStorage.getItem(name) : "";  
48.            if (js == null || js.length == 0) {  
49.                if (window.ActiveXObject) {  
50.                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
51.                } else if (window.XMLHttpRequest) {  
52.                    xhr = new XMLHttpRequest();  
53.                }  
54.                xhr.open("GET", url);  
55.                xhr.send(null);  
56.                xhr.onreadystatechange = function () {  
57.                    if (xhr.readyState == 4 && xhr.status == 200) {  
58.                        js = xhr.responseText;  
59.                        localStorage.setItem(name, js);  
60.                        js = js == null ? "" : js;  
61.                        addTxt(js, "js");  
62.                    }  
63.                };  
64.            } else {  
65.                addTxt(js, "js");  
66.            }  
67.        }  
68.   
69.        //第二步：初始化Css  
70.        function initCss(name, url) {  
71.            var xhr;  
72.            var css = window.localStorage ? localStorage.getItem(name) : "";  
73.            if (css == null || css.length == 0) {  
74.                if (window.ActiveXObject) {  
75.                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
76.                } else if (window.XMLHttpRequest) {  
77.                    xhr = new XMLHttpRequest();  
78.                }  
79.                xhr.open("GET", url);  
80.                xhr.send(null);  
81.                xhr.onreadystatechange = function () {  
82.                    if (xhr.readyState == 4 && xhr.status == 200) {  
83.                        css = xhr.responseText;  
84.                        localStorage.setItem(name, css);  
85.                        css = css == null ? "" : css;  
86.                        css = css.replace(/images\//g, "style/images/");  
87.                        addTxt(css, "css");  
88.                    }  
89.                };  
90.            } else {  
91.                css = css.replace(/images\//g, "style/images/");  
92.                addTxt(css, "css");  
93.            }  
94.        }  
95.   
96.        //辅助方法1：动态添加js，css文件引用  
97.        function addFile(url, fileType) {  
98.            var head = document.getElementsByTagName('HEAD').item(0);  
99.            var link;  
100.            if (fileType == "js") {  
101.                link = document.createElement("script");  
102.                link.type = "text/javascript";  
103.                link.src = url;  
104.            } else {  
105.                link = document.createElement("link");  
106.                link.type = "text/css";  
107.                link.rel = "stylesheet";  
108.                link.rev = "stylesheet";  
109.                link.media = "screen";  
110.                link.href = url;  
111.            }  
112.            head.appendChild(link);  
113.        }  
114.   
115.        //辅助方法2：动态添加js，css文件内容   
116.        function addTxt(text, fileType) {  
117.            var head = document.getElementsByTagName('HEAD').item(0);  
118.            var link;  
119.            if (fileType == "js") {  
120.                link = document.createElement("script");  
121.                link.type = "text/javascript";  
122.                link.innerHTML = text;  
123.            } else {  
124.                link = document.createElement("style");  
125.                link.type = "text/css";  
126.                link.innerHTML = text;  
127.            }  
128.            head.appendChild(link);  
129.        }  
130.    </script>  

查看写入记录：

封装成JS插件：

[javascript] view plain copy

print?

1. /** 
2. * 插件功能：使用localStorage缓存js和css文件，减少http请求和页面渲染时间，适用于Web移动端H5页面制作。 
3. * 插件作者：[e-mail] 
4. * 使用方法：   
5. *   1.使用此插件前，需要给插件的pageVersion变量赋值，建议变量值由服务器后端输出，当需要更新客户端资源时，修改版本值即可。 
6. *   2.加载Js：由于js加载有顺序要求，所以需要将后加载的脚本作为前一个脚本的回调参数传入，如： 
7. *   whir.res.loadJs("jquery", "<%= BasePath %>Turntable/Script/jquery-1.8.3.min.js", 
8. *       function () { 
9. *            whir.res.loadJs("turntable", "Script/whir.turntable.js", null); 
10. *    }); 
11. *   3.加载css，如：whir.res.loadCss("css", "/Style/css_whir.css", null); 
12. */  
13. var whir = window.whir || {};  
14. whir.res = {  
15.     pageVersion: "", //页面版本，由页面输出，用于刷新localStorage缓存  
16.     //动态加载js文件并缓存  
17.     loadJs: function (name, url, callback) {  
18.         if (window.localStorage) {  
19.             var xhr;  
20.             var js = localStorage.getItem(name);  
21.             if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) {  
22.                 if (window.ActiveXObject) {  
23.                     xhr = new ActiveXObject("Microsoft.XMLHTTP");  
24.                 } else if (window.XMLHttpRequest) {  
25.                     xhr = new XMLHttpRequest();  
26.                 }  
27.                 if (xhr != null) {  
28.                     xhr.open("GET", url);  
29.                     xhr.send(null);  
30.                     xhr.onreadystatechange = function () {  
31.                         if (xhr.readyState == 4 && xhr.status == 200) {  
32.                             js = xhr.responseText;  
33.                             localStorage.setItem(name, js);  
34.                             localStorage.setItem("version", whir.res.pageVersion);  
35.                             js = js == null ? "" : js;  
36.                             whir.res.writeJs(js);  
37.                             if (callback != null) {  
38.                                 callback(); //回调，执行下一个引用  
39.                             }  
40.                         }  
41.                     };  
42.                 }  
43.             } else {  
44.                 whir.res.writeJs(js);  
45.                 if (callback != null) {  
46.                     callback(); //回调，执行下一个引用  
47.                 }  
48.             }  
49.         } else {  
50.             whir.res.linkJs(url);  
51.         }  
52.     },  
53.     loadCss: function (name, url) {  
54.         if (window.localStorage) {  
55.             var xhr;  
56.             var css = localStorage.getItem(name);  
57.             if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) {  
58.                 if (window.ActiveXObject) {  
59.                     xhr = new ActiveXObject("Microsoft.XMLHTTP");  
60.                 } else if (window.XMLHttpRequest) {  
61.                     xhr = new XMLHttpRequest();  
62.                 }  
63.                 if (xhr != null) {  
64.                     xhr.open("GET", url);  
65.                     xhr.send(null);  
66.                     xhr.onreadystatechange = function () {  
67.                         if (xhr.readyState == 4 && xhr.status == 200) {  
68.                             css = xhr.responseText;  
69.                             localStorage.setItem(name, css);  
70.                             localStorage.setItem("version", whir.res.pageVersion);  
71.                             css = css == null ? "" : css;  
72.                             css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理  
73.                             whir.res.writeCss(css);  
74.                         }  
75.                     };  
76.                 }  
77.             } else {  
78.                 css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理  
79.                 whir.res.writeCss(css);  
80.             }  
81.         } else {  
82.             whir.res.linkCss(url);  
83.         }  
84.     },  
85.     //往页面写入js脚本  
86.     writeJs: function (text) {  
87.         var head = document.getElementsByTagName('HEAD').item(0);  
88.         var link = document.createElement("script");  
89.         link.type = "text/javascript";  
90.         link.innerHTML = text;  
91.         head.appendChild(link);  
92.     },  
93.     //往页面写入css样式  
94.     writeCss: function (text) {  
95.         var head = document.getElementsByTagName('HEAD').item(0);  
96.         var link = document.createElement("style");  
97.         link.type = "text/css";  
98.         link.innerHTML = text;  
99.         head.appendChild(link);  
100.     },  
101.     //往页面引入js脚本  
102.     linkJs: function (url) {  
103.         var head = document.getElementsByTagName('HEAD').item(0);  
104.         var link = document.createElement("script");  
105.         link.type = "text/javascript";  
106.         link.src = url;  
107.         head.appendChild(link);  
108.     },  
109.     //往页面引入css样式  
110.     linkCss: function (url) {  
111.         var head = document.getElementsByTagName('HEAD').item(0);  
112.         var link = document.createElement("link");  
113.         link.type = "text/css";  
114.         link.rel = "stylesheet";  
115.         link.rev = "stylesheet";  
116.         link.media = "screen";  
117.         link.href = url;  
118.         head.appendChild(link);  
119.     }  
120. }  

调用该插件：

[javascript] view plain copy

print?

1. <script type="text/javascript">  
2.     //入口函数  
3.     whir.res.pageVersion = "1002";  //页面版本，用于检测是否需要更新缓存  
4.     whir.res.loadJs("jquery", "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js",  
5.      function () {  
6.          whir.res.loadJs("turntable", "/gfdzp201508257998/Turntable/Script/whir.turntable.js", null);  
7.      });  
8.     whir.res.loadCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css", null);  
9. </script>