Localstorage caching JS and CSS file instance methods

Source: Internet
Author: User

jquery and public styles are cached to Localstorage, reducing HTTP requests to optimize page load times, as the following code can do:

 <! DOCTYPE html>

To view write records:

Package into JS plugin:

/*** Plugin Features: Use localstorage cache js and CSS files, reduce HTTP requests and page rendering time, for Web mobile H5 page production. * Plugin Author: zhangqs008@163.com* How to use: * 1. Before using this plug-in, you need to assign a value to the pageversion variable of the plug-in, suggesting that the value of the variable is output by the server backend, modifying the version value when the client resource needs to be updated. * 2. Load js: Since JS loading has sequential requirements, the post-loaded script needs to be passed in as a callback parameter of the previous script, 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, 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, execution 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/");                        The image path in CSS needs to be handled separately WHIR.RES.WRITECSS (CSS);                }                    }; }} else {css = Css.replace (/images\//g, "style/images/"); the picture path in//CSS needs to be handled separately whir            . RES.WRITECSS (CSS);        }} else {whir.res.linkCss (URL);        }},//Go to the page to write the 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);        },//toward page write CSS style 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); },//Go to the page to introduce JS script 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);        },//to the page to introduce CSS style 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); }}

Call the plugin:

<script type= "Text/javascript" src= "fengzhuang.js" ></script>    <script type= "Text/javascript" >        //ingress function        whir.res.pageVersion = "1002";  Page version to detect if        the cache whir.res.loadJs ("jquery", "js/jquery-1.9.1.min.js",         function () {whir.res.loadJs)             need to be updated ("Zidingyi", "js/zidingyi.js", null);         });        Whir.res.loadCss ("CSS", "RESET.CSS", null);    </script>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.