如何优雅的用localStorage缓存图片

遇到一个项目，甲方对页面打开时间要求特别高，于是萌生出把资源缓存到本地的想法。本地储存数据用的是localStorage，摸索了一下，便出现了下面的js：

//localFile.js
//版本控制
var script = document.getElementsByTagName("script");
for (var i = 0; i < script.length; i++) {
    if (script[i].getAttribute("version")) {
        if (script[i].getAttribute("version") != localStorage["version"]) {
            localStorage.clear();
            localStorage["version"] = script[i].getAttribute("version");
        }
    }
}

//js
function loadJs(jsUrl) {
    if(!localStorage[jsUrl]){
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET",jsUrl,false);
        xmlhttp.send();
        localStorage[jsUrl] = xmlhttp.responseText;
    }
    return localStorage[jsUrl]
}

//img
function loadImg(img) {
    if (img.getAttribute("lsrc")) {
        if (!localStorage[img.getAttribute("lsrc")]) {
            var x = new XMLHttpRequest();
            x.responseType = "blob";
            x.open("get", img.getAttribute("lsrc"), true);
            x.onreadystatechange = function () {
                if (x.readyState == 4) {
                    var reader = new FileReader();
                    reader.readAsDataURL(x.response);
                    reader.onload = function () {
                        localStorage[img.getAttribute("lsrc")] = this.result;
                        img.src = this.result;
                    }
                }
            }
            x.send();
        }
        else {
            img.src = localStorage[img.getAttribute("lsrc")];
        }
    }
}

//CSS
function loadCss(url) {
    if(!localStorage[url]){
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET",url,false);
        xmlhttp.send();
        localStorage[url] = xmlhttp.responseText;
    }
    var s = document.createElement("style");
    s.innerHTML = localStorage[url];
    document.getElementsByTagName("head")[0].appendChild(s)
}

调用方法：

引入js:

version为版本号，当版本号改变的时候，js会清空localStorage，执行的时候会重新载入全部资源。

载入js:

载入css:

载入图片

< img lsrc="img/top.png" src="" onerror="loadImg(this)" class="top" >

图片src为空，真实地址写在lsrc属性里。当图片读取""地址的时候，会出错，调用onerror从而执行函数载入图片数据。

更加丧心病狂

把这个js也写入localStorage，记得这个要优先执行～
实测：

A6095732-D196-4503-A989-A3BF44539331.png

timg.jpeg