Mobile End uses localstorage cache JS and CSS methods (Web development) _javascript Tips

Caching jquery and common styles to localstorage can reduce HTTP requests and optimize page load times, which can be implemented by the following code:

<script type= "Text/javascript" >//Entry function if (window.localstorage) {Initjs (); 
Initcss ("CSS", "/gfdzp201508257998/turntable/style/css_whir.css"); 
else {addfile ("/gfdzp201508257998/turntable/script/jquery-1.8.3.min.js", "JS"); 
AddFile ("/gfdzp201508257998/turntable/script/whir.turntable.js", "JS"); 
AddFile ("/gfdzp201508257998/turntable/style/css_whir.css", "CSS"); 
//First step: Load page JS: First load jquery after loading user script function Initjs () {var name = "jquery"; 
var url = "/gfdzp201508257998/turntable/script/jquery-1.8.3.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 = =) {js = Xhr.responsetext; 
Localstorage.setitem (name, JS); JS = JS = null? "": JS; 
Addtxt (JS, "JS"); Initturntable (); 
Ensure that jquery} is referenced first; 
else {addtxt (js, "JS"); 
Initturntable (); 
}///Load Custom script function initturntable () {var name = ' Turntable '; 
var url = "/gfdzp201508257998/turntable/script/whir.turntable.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 = =) {js = Xhr.responsetext; 
Localstorage.setitem (name, JS); JS = JS = null? 
"": JS; 
Addtxt (JS, "JS"); 
} 
}; 
else {addtxt (js, "JS"); 
}//Step two: Initializes the CSS function 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 =) {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");  
}//Auxiliary Method 1: Dynamically add Js,css File reference 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); }//Auxiliary Method 2: Dynamically add js,css file content 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>

To view write records:

Packaged into JS Plug-ins:

/** * Plug-in function: Use Localstorage cache js and CSS files, reduce HTTP requests and page rendering time, suitable for Web Mobile end H5 page production. 
* Plugin Author: zhangqs008@163.com * Use method: * 1. Before using this plug-in, you need to assign a value to the plug-in's pageversion variable, which is recommended for variable values to be exported by the server, and modify the version value when the client resource needs to be updated. * 2. Load JS: Because JS load has sequential requirements, it needs to be loaded after the script as a callback parameter of the previous script passed in, such as: * Whir.res.loadJs ("jquery", "<%= basepath%>turntable/script 
/jquery-1.8.3.min.js ", * function () {* Whir.res.loadJs (" turntable "," script/whir.turntable.js ", null); 
* }); 
* 3. Load CSS, such as: Whir.res.loadCss ("CSS", "/STYLE/CSS_WHIR.CSS", null); * * var whir = Window.whir | | 
{}; Whir.res = {pageversion: "",//page version, output by page, used to refresh Localstorage cache//Dynamically load JS file and cache loadjs:function (name, URL, callback) {I 
F (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 = =) {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 ();//callback, execute next reference}}; 
} else {whir.res.writeJs (JS); 
if (callback!= null) {callback ();//callback, execute Next reference}}} 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 =) {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 in the image path needs to deal with WHIR.RES.WRITECSS (CSS) alone; 
} 
}; 
} else {css = Css.replace (/images\//g, "style/images/"); the image path in//CSS should be handled separately WHIR.RES.WRITECSS (CSS); 
} else {whir.res.linkCss (URL); 
},//Go to page Write JS script 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); 
(Write CSS style to page 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); 
Linkjs:function (URL) {var head = document.getElementsByTagName (' head ') is introduced to the page. Item (0); 
var link = document.createelement ("script"); 
Link.type = "Text/javascript"; Link.src = URL; 
Head.appendchild (link); 
Linkcss:function (URL) {var head = document.getElementsByTagName (' head ') is introduced to the page. 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); } 
}

Invoke the plug-in:

<script type= "Text/javascript" >// 
entry function 
whir.res.pageVersion = "1002";//page version to detect whether the cache 
needs to be updated Whir.res.loadJs ("jquery", "/gfdzp201508257998/turntable/script/jquery-1.8.3.min.js", 
function () { 
Whir.res.loadJs ("Turntable", "/gfdzp201508257998/turntable/script/whir.turntable.js", null); 
}); 
Whir.res.loadCss ("CSS", "/GFDZP201508257998/TURNTABLE/STYLE/CSS_WHIR.CSS", null); 
</script>

The above is a small set to introduce the mobile end of the use of Localstorage cache JS and CSS method (Web development), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!