當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript使用localStorage缓存Js和css文件

發布時間：2025/7/14 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript使用localStorage缓存Js和css文件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

對于WebApp來說，將js css文件緩存到localstorage區可以減少頁面在加載時與HTTP請求的交互次數,從而優化頁面的加載時間.特別是當移端信號不好高延遲時優化效果還是很顯見的

下面的代碼可以實現此功能：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><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>

再看看封裝通用插件方法:

/*** 插件功能:使用localStorage緩存js和css文件,減少http請求和頁面渲染的時間,使用于web移動端H5頁面的制作* 使用方法:* 1.使用此插件前,需要給插件的pageVersion變量賦值,建議變量值由服務器后端輸出,當需要更新客戶資源時,修改變量值即可* 2.加載js:由于js加載有順序要求,所以需要將后加載的腳本作為前一個加載的回調函數參數傳入,如:* whir.res.loadJs ("jquery","TurnTable/Script/jquery.min.js",* function () {* whir.res.loadJs(name,url,null)* });*/ var whir = window.whir || {}; whir.res = {pageVersion : "",//版本,有頁面輸入,用語刷新localStorage緩存loadJs : function (name, url, callback) {//動態加載js文件并緩存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.XNLHTTP");} 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);}},writeJs : function (text) {//往頁面寫入js\腳本var head = document.getElementsByTagName('HEAD').item(0);//獲取headvar link = document.createElement("script");link.type = "text/javascript";link.innerHTML = text;head.appendChild(link);},writeCss : function (text) {//往頁面寫入css樣式var head = document.getElementsByTagName("HEAD").item(0);var link = document.createElement("style");link.type = "text/css";link.innerHTML = text;head.appendChild(link);},linkJs : function (url) {//往頁面引入jsvar head = document.getElementsByTagName('HEAD').item(0);//獲取headvar link = documenr.createElement("script");link.type = "text/javascript";link.src = url;head.appendChild(link);},linkCss : function (url) {//往頁面引入cssvar 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);} };

? 調用該插件：

電腦端使用localstorage是測試沒有問題的,但是用android的apk打包之后,導致localstorage失效,無法進行緩存,查閱資料之后,得知解決方法:

安卓代碼:

mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setAppCacheMaxSize(1024*1024*8); String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath(); mWebView.getSettings().setAppCachePath(appCachePath); mWebView.getSettings().setAllowFileAccess(true); mWebView.getSettings().setAppCacheEnabled(true);

另外：Web移動端使用localStorage緩存Js和css文件 | 強制不要緩存

1.盡量不把js放在onload事件中，而是放在由用戶主動觸發的事件 2.加時間戳，時間不同則會加載js而非使用緩存強制不要緩存： <meta http-equiv=Cache-Control content=no-cache /> 必須結合其他：  <meta http-equiv="pragram" content="no-cache">  <meta http-equiv="cache-control" content="no-cache, must-revalidate">  <meta http-equiv="expires" content="0">  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

轉自：https://blog.csdn.net/qq_29132907/article/details/79390605

https://www.cnblogs.com/wwdxf/p/6646649.html

https://www.cnblogs.com/zyjzz/p/6973608.html

轉載于:https://www.cnblogs.com/7qin/p/10236737.html

總結

以上是生活随笔為你收集整理的JavaScript使用localStorage缓存Js和css文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： aws相关文档
下一篇： Salesforce - soql 多字