Web Mobile side uses Localstorage to cache JS and CSS files

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) {INITJ
                    S ();
                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 = 200) {
                        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 = 200) {
                        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 = 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"); }//Auxiliary Method 1: Dynamically add Js,css File reference function addfile (URL, fileType) {var head = Document.gete
      Lementsbytagname (' 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.getelementsby
            TagName (' 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 from page, used to refresh Localstorage cache//Dynamically load JS file and cache loadjs:function (name, URL, callb
            ACK) {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 ();//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 = 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 in the image path needs to deal with WHIR.RES.WRITECSS (CSS) alone;
                }
                    }; } else {css = Css.replace (/images\//g, "style/images/"); picture paths in//css need to be handled separately W
            HIR.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";  The page version, used to detect the need to update the cache
        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>