Web Mobile uses localstorage cache JS and CSS files

Caching the JS CSS file to the Localstorage area reduces the number of times the page interacts with the HTTP request at load time, thus optimizing the load times of the page.

Computer-side use of localstorage is no problem, but after the Android apk packaging, resulting in localstorage failure, unable to cache, access to information, the solution:

Android Code:

Mwebview.getsettings (). setdomstorageenabled (true);   Mwebview.getsettings (). Setappcachemaxsize (1024*1024*8);   = Getapplicationcontext (). Getcachedir (). GetAbsolutePath ();  Mwebview.getsettings (). Setappcachepath (Appcachepath);  Mwebview.getsettings (). setallowfileaccess (true);  Mwebview.getsettings (). setappcacheenabled (true

You can then use Localstorage to cache the

The caching method has been encapsulated as a generic plug-in:

The specific code is as follows (online query):

/** plugin function: Use Localstorage to cache JS and CSS files, reduce the time of HTTP request and page rendering, make use of H5 page for Web Mobile: * 1. Before using this plugin, you need to assign a value to the pageversion variable of the plugin, build The value of the variable is output by the server backend, and when the client resource needs to be updated, the variable value can be modified * 2. Load js: Since JS loading has sequential requirements, it is necessary to pass the post-loaded script as the previous loaded callback function parameter, such as: * Whir.res.loadJs ("                                 jquery "," <%= basepath%>turntable/script/jquery.min.js ", * function () {* Whir.res.loadJs (name,url,null) *}); */varWhir = Window.whir | |{};whir.res={pageversion:"",//version, with page input, term refresh Localstorage cacheLoadjs:function(Name, URL, callback) {//dynamically loading JS files and caching        if(window.localstorage) {varXHR; varJS =Localstorage.getitem (name); if(js = =NULL|| Js.length = = 0 | | This. pageversion! = Localstorage.getitem ("Version")) {                if(window. ActiveXObject) {XHR=NewActiveXObject ("Microsoft.XMLHTTP"); } Else if(window. XMLHttpRequest) {XHR=NewXMLHttpRequest (); }                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 ();//callback, executing the next reference                }            }        } Else{whir.res.linkJs (URL); }}, Loadcss:function(name,url) {if(window.localstorage) {varXHR; varCSS =Localstorage.getitem (name); if(CSS = =NULL|| Css.length = = 0 | | This. pageversion! = Localstorage.getitem ("Version")) {                if(window. ActiveXObject) {XHR=NewActiveXObject ("Microsoft.xnlhttp"); } Else if(window. XMLHttpRequest) {XHR=NewXMLHttpRequest (); }                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/");//the image path in CSS needs to be handled separatelywhir.res.writeCss (CSS); }                    }                }            } Else{CSS= Css.replace (/images\//g, "style/images/");//the image path in CSS needs to be handled separatelywhir.res.writeCss (CSS); }        } Else{whir.res.linkCss (URL); }}, Writejs:function(text) {//write js\ script to page        varHead = document.getElementsByTagName (' head '). Item (0);//        varlink = document.createelement ("Script"); Link.type= "Text/javascript"; Link.innerhtml=text;    Head.appendchild (link); }, Writecss:function(text) {//writing CSS Styles to a page        varHead = document.getElementsByTagName ("Head"). Item (0); varlink = document.createelement ("Style"); Link.type= "Text/css"; Link.innerhtml=text;    Head.appendchild (link); }, Linkjs:function(URL) {//introduce JS to the page        varHead = document.getElementsByTagName (' head '). Item (0);//        varlink = documenr.createelement ("Script"); Link.type= "Text/javascript"; LINK.SRC=URL;    Head.appendchild (link); }, Linkcss:function(URL) {//Introducing CSS to a page        varHead = document.getElementsByTagName (' head '). Item (0); varlink = document.createelement ("link"); Link.type= "Text/css"; Link.rel= "stylesheet"; Link.rev= "stylesheet"; Link.media= "Screen"; Link.href=URL;    Head.appendchild (link); }};

The first time the load may be slow, the second time can significantly improve access speed ...

Web Mobile uses localstorage cache JS and CSS files