JS使用localStorage缓存Js和css文件

代码下载：
http://download.csdn.net/download/qq_29132907/10261798
目录结构

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

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 1.缓存css、js到LocalStorage2.调用本地缓存css/js拼接到HTML页面--><script type="text/javascript">//入口函数if (window.localStorage) {initJs();initCss("css", "reset.css");} else {alert("不能使用本地缓存");addFile("http://libs.baidu.com/jquery/2.0.0/jquery.min.js", "js");addFile("/gfdzp201508257998/Turntable/Script/whir.turntable.js", "js");addFile("/gfdzp201508257998/Turntable/Style/css_whir.css", "css");}//第一步：加载页面js：先加载jQuery后加载用户脚本function initJs() {var name = "jquery";//存储key的namevar url = "js/jquery-1.9.1.min.js";var xhr;var js = window.localStorage ? localStorage.getItem(name) : "";if (js == null || js.length == 0) {if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}xhr.open("GET", url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {js = xhr.responseText;localStorage.setItem(name, js);js = js == null ? "" : js;addTxt(js, "js");initTurntable(); //确保先引用Jquery}};} else {addTxt(js, "js");initTurntable();}}//加载自定义脚本function initTurntable() {var name = "zidingyi";var url = "js/zidingyi.js";var xhr;var js = window.localStorage ? localStorage.getItem(name) : "";if (js == null || js.length == 0) {if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}xhr.open("GET", url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {js = xhr.responseText;localStorage.setItem(name, js);js = js == null ? "" : js;addTxt(js, "js");}};} else {addTxt(js, "js");}}//第二步：初始化Cssfunction initCss(name, url) {var xhr;var css = window.localStorage ? localStorage.getItem(name) : "";if (css == null || css.length == 0) {if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}xhr.open("GET", url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {css = xhr.responseText;localStorage.setItem(name, css);css = css == null ? "" : css;css = css.replace(/images\//g, "style/images/");addTxt(css, "css");}};} else {css = css.replace(/images\//g, "style/images/");addTxt(css, "css");}}//辅助方法1：动态添加js，css文件引用function addFile(url, fileType) {var head = document.getElementsByTagName('HEAD').item(0);var link;if (fileType == "js") {link = document.createElement("script");link.type = "text/javascript";link.src = url;} else {link = document.createElement("link");link.type = "text/css";link.rel = "stylesheet";link.rev = "stylesheet";link.media = "screen";link.href = url;}head.appendChild(link);}//辅助方法2：动态添加js，css文件内容 function addTxt(text, fileType) {var head = document.getElementsByTagName('HEAD').item(0);var link;if (fileType == "js") {link = document.createElement("script");link.type = "text/javascript";link.innerHTML = text;} else {link = document.createElement("style");link.type = "text/css";link.innerHTML = text;}head.appendChild(link);}</script></body>
</html>

查看写入记录：

封装成JS插件：

/**
* 插件功能：使用localStorage缓存js和css文件，减少http请求和页面渲染时间，适用于Web移动端H5页面制作。
* 插件作者：zhangqs008@163.com
* 使用方法：
*   1.使用此插件前，需要给插件的pageVersion变量赋值，建议变量值由服务器后端输出，当需要更新客户端资源时，修改版本值即可。
*   2.加载Js：由于js加载有顺序要求，所以需要将后加载的脚本作为前一个脚本的回调参数传入，如：
*   whir.res.loadJs("jquery", "<%= BasePath %>Turntable/Script/jquery-1.8.3.min.js",
*       function () {
*            whir.res.loadJs("turntable", "Script/whir.turntable.js", null);
*    });
*   3.加载css，如：whir.res.loadCss("css", "/Style/css_whir.css", null);
*/
var whir = window.whir || {};
whir.res = {pageVersion: "", //页面版本，由页面输出，用于刷新localStorage缓存//动态加载js文件并缓存loadJs: function (name, url, callback) {if (window.localStorage) {var xhr;var js = localStorage.getItem(name);if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) {if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}if (xhr != null) {xhr.open("GET", url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {js = xhr.responseText;localStorage.setItem(name, js);localStorage.setItem("version", whir.res.pageVersion);js = js == null ? "" : js;whir.res.writeJs(js);if (callback != null) {callback(); //回调，执行下一个引用}}};}} else {whir.res.writeJs(js);if (callback != null) {callback(); //回调，执行下一个引用}}} else {whir.res.linkJs(url);}},loadCss: function (name, url) {if (window.localStorage) {var xhr;var css = localStorage.getItem(name);if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) {if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}if (xhr != null) {xhr.open("GET", url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {css = xhr.responseText;localStorage.setItem(name, css);localStorage.setItem("version", whir.res.pageVersion);css = css == null ? "" : css;css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理whir.res.writeCss(css);}};}} else {css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理whir.res.writeCss(css);}} else {whir.res.linkCss(url);}},//往页面写入js脚本writeJs: function (text) {var head = document.getElementsByTagName('HEAD').item(0);var link = document.createElement("script");link.type = "text/javascript";link.innerHTML = text;head.appendChild(link);},//往页面写入css样式writeCss: function (text) {var head = document.getElementsByTagName('HEAD').item(0);var link = document.createElement("style");link.type = "text/css";link.innerHTML = text;head.appendChild(link);},//往页面引入js脚本linkJs: function (url) {var head = document.getElementsByTagName('HEAD').item(0);var link = document.createElement("script");link.type = "text/javascript";link.src = url;head.appendChild(link);},//往页面引入css样式linkCss: function (url) {var head = document.getElementsByTagName('HEAD').item(0);var link = document.createElement("link");link.type = "text/css";link.rel = "stylesheet";link.rev = "stylesheet";link.media = "screen";link.href = url;head.appendChild(link);}
}

调用该插件：

<script type="text/javascript" src="fengzhuang.js"></script><script type="text/javascript">//入口函数whir.res.pageVersion = "1002";  //页面版本，用于检测是否需要更新缓存whir.res.loadJs("jquery", "js/jquery-1.9.1.min.js",function () {whir.res.loadJs("zidingyi", "js/zidingyi.js", null);});whir.res.loadCss("css", "reset.css", null);</script>

JS使用localStorage缓存Js和css文件相关推荐

JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的下面的代 ...
利用浏览器LocalStorage缓存图片，视频文件
文章路径:https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/ 转载于:https://www.cnbl ...
通过minify将项目中js和css文件的打包
减少http请求数,有三个好处,即减少DNS请求所耗费的时间..减少服务器压力.减少http请求头,因此这是我们前端性能优化的一个关键点. 对于我们前端来说,减少http请求数的一个途径就是合并js和 ...
合并多个js,css文件的方法：在服务端合并js和css文件
合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度. 通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文件夹里就有10几个文件,这样 ...
js里css不起作用,CSS文件在NODE js中不起作用
出于某种原因,我已将我的css文件附加到我的html文件中.然后我在节点js中使用express打开html文件.但是,当我通过节点js运行Web服务器时,css文件无法打开.我认为既然css文件包含 ...
【半原创】将js和css文件装入localStorage加速程序执行
首先感谢某某作者写的文章:http://www.jb51.net/article/12793.htm 直接上代码,注意文件名为env.js 原理如下: 一次批量加要加载的文件存入数组,采用Ajax方式 ...
js/css文件修改后浏览器本地缓存解决
本文实例讲述了让html页面随js的修改来更新缓存的实现方法.分享给大家供大家参考.具体实现方法如下: 很多朋友都会碰到这样的情况:如果我们页面加载了js的话下次打开时也会是调用这个js缓存文件,但对 ...
网页自动切换html css js,HTML页面自动清理js、css文件的缓存（自动添加版本号）_HTML/Xhtml_网页制作...
这篇文章主要介绍了HTML页面自动清理js.css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家HTML源码,也给大家做个参考.对HTML感兴趣的小伙伴们一起跟随小编过来看看吧在we ...
html实现自动清理js、css文件的缓存
html是如何实现自动清理js.css文件缓存的?很多人都不太了解,今天小编为了让大家更加了解自动清理js.css文件缓存的方法,所以给大家总结了以下内容,一起往下看吧. 方法如下: 1.手动清除浏览 ...

JS使用localStorage缓存Js和css文件

JS使用localStorage缓存Js和css文件相关推荐

最新文章

热门文章