H5 localstorage存储文件

H5 localstorage存储文件

利用localStorage储存js文件，只有在第一次访问该页面的时候加载js文件，以后在访问的时候加载本地localStorage执行

操作步骤：
1. 创建公共文件config.js文件
2. 页面引用存储
3. 使用

接下来

config.js 文件附上：

;(function(global) {
    'use strict';
    //检查文件类型
    var TYPE_RE = /\.(js|css)(?=[?&,]|$)/i;

    function fileType(str) {
        var ext = 'js';
        str.replace(TYPE_RE, function(m, $1) {
            ext = $1;
        });
        if(ext !== 'js' && ext !== 'css') ext = 'unknown';
        return ext;
    }

    //将js片段插入dom结构
    function evalGlobal(strScript) {
        var scriptEl = document.createElement("script");
        scriptEl.type = "text/javascript";
        scriptEl.text = strScript;
        document.getElementsByTagName("head")[0].appendChild(scriptEl);
    }

    //将css片段插入dom结构
    function createCss(strCss) {
        var styleEl = document.createElement('style');
        document.head.appendChild(styleEl);
        styleEl.appendChild(document.createTextNode(strCss));
    }

    // 在全局作用域执行js或插入style node
    function defineCode(url, str) {
        var type = fileType(url);
        if(type === "js") {
            //with(window)eval(str);
            evalGlobal(str);
        } else if(type === "css") {
            createCss(str);
        }
    }

    // 将数据写入localstorage
    var setLocalStorage = function(key, item) {
        window.localStorage && window.localStorage.setItem(key, item);
    }

    // 从localstorage中读取数据
    var getLocalStorage = function(key) {
        return window.localStorage && window.localStorage.getItem(key);
    }

    // 通过AJAX请求读取js和css文件内容，使用队列控制js的执行顺序
    var rawQ = [];
    var monkeyLoader = {
        loadInjection: function(url, onload, bOrder) {
            var iQ = rawQ.length;
            if(bOrder) {
                var qScript = {
                    key: null,
                    response: null,
                    onload: onload,
                    done: false
                };
                rawQ[iQ] = qScript;
            }
            //有localstorage 缓存
            var ls = getLocalStorage(url);
            if(ls !== null && ls != "undefined" && ls != "null") {
                if(bOrder) {
                    rawQ[iQ].response = ls;
                    rawQ[iQ].key = url;
                    monkeyLoader.injectScripts();
                } else {
                    defineCode(url, ls)
                    if(onload) {
                        onload();
                    }
                }
            } else {
                var xhrObj = monkeyLoader.getXHROject();
                xhrObj.open('GET', url, true);
                xhrObj.send(null);
                xhrObj.onreadystatechange = function() {
                    if(xhrObj.readyState == 4) {
                        if(xhrObj.status == 200) {
                            setLocalStorage(url, xhrObj.responseText);
                            if(bOrder) {
                                rawQ[iQ].response = xhrObj.responseText;
                                rawQ[iQ].key = url;
                                monkeyLoader.injectScripts();
                            } else {
                                defineCode(url, xhrObj.responseText)
                                if(onload) {
                                    onload();
                                }
                            }
                        }
                    }
                }
            }
        },

        injectScripts: function() {
            var len = rawQ.length;
            //按顺序执行队列中的脚本
            for(var i = 0; i < len; i++) {
                var qScript = rawQ[i];
                //没有执行
                if(!qScript.done) {
                    //没有加载完成
                    if(!qScript.response) {
                        console.log("raw code lost or not load!");
                        //停止，等待加载完成, 由于脚本是按顺序添加到队列的，因此这里保证了脚本的执行顺序
                        break;
                    } else { //已经加载完成了
                        defineCode(qScript.key, qScript.response)
                        if(qScript.onload) {
                            qScript.onload();
                        }
                        delete qScript.response;
                        qScript.done = true;
                    }
                }
            }
        },

        getXHROject: function() {
            //创建XMLHttpRequest对象
            var xmlhttp;
            if(window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }
    };

    global.monkeyLoader = monkeyLoader.loadInjection;
    global.defineCode = defineCode;//全局作用插入js/css
    global.getLocalStorage = getLocalStorage;//获取
})(this);

页面使用 index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body>
        <div>测试localstorage缓存JS文件！</div>
        <a href="version.html">点我试试</a>
    </body>
    <script src="js/config.js"></script>
    <script>
        //存储

        monkeyLoader('js/jquery-1.8.3.min.js', function() {
            console.log("1")
        }, true);

        monkeyLoader('js/zepto1.2.0.min.js', function() {
            console.log("2")
        }, true);

        console.log($("a").html())

    </script>

</html>

另一个页面使用存储的JS文件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <a>点我试试</a>
    </body>
    <script src="js/config.js"></script>
    <script type="text/javascript">

        var path = "js/zepto1.2.0.min.js";
        defineCode(path,getLocalStorage(path));

        console.log($("a").html())

    </script>

</html>

---