萌生出把資源緩存到本地的想法。本地儲存數據用的是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:

<script src="js/localFile.js" version=12></script>

version為版本號，當版本號改變的時候，js會清空localStorage，執行的時候會重新載入全部資源。

載入js:

<script>eval(loadJs("js/vue.min.js"));</script>

載入css:

<script>loadCss("style.css")</script>

載入圖片

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

圖片src為空，真實地址寫在lsrc屬性里。當圖片讀取""地址的時候，會出錯，調用onerror從而執行函數載入圖片數據。

更加喪心病狂

<script version=12>//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");
}
}
}
if(!localStorage["js/localFile.js"]){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","js/localFile.js",false);
xmlhttp.send();
localStorage["js/localFile.js"] = xmlhttp.responseText;
}
eval(localStorage["js/localFile.js"]);
</script>


把這個js也寫入localStorage，記得這個要優先執行～

實測：

推薦閱讀：

相关文章