H5 localstorage存储文件

た入场券 2022-07-11 11:13 206阅读 0赞

## 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>

--------------------