1 回答

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊
利用localStorage儲(chǔ)存js文件,只有在第一次訪問(wèn)該頁(yè)面的時(shí)候加載js文件,以后在訪問(wèn)的時(shí)候加載本地localStorage執(zhí)行
封裝lsFile類(lèi) 有url、filename(key前綴)、lname(key)、filetext(值)屬性
var lstorage = window.localStorage
function lsFile(url){
this.url = url
this.filename = url.substring(url.lastIndexOf("/")+1,url.lastIndexOf("."))
//this.filename = document.location.pathname
this.lname = 'Lsf_'+this.filename+'_'+url.substring(url.lastIndexOf("?")+1)
this.filetext = lstorage.getItem(this.lname)
this.init()
}
首先判斷本地localStorage有沒(méi)有緩存文件,有的話直接getItem獲取,通過(guò)eval執(zhí)行,沒(méi)有話通過(guò)執(zhí)行ajax獲取js文件內(nèi)容。
lsFile.prototype.init = function(){
if (this.filetext){
this.eval(this.filetext)
}else{
this.xhr(this.url,this.runstr)
}
}
通過(guò)ajax采用同步的形式獲取js內(nèi)容,取得內(nèi)容后,eval執(zhí)行js文件的內(nèi)容,setItem設(shè)置保存到localStorage中,再刪除localStorage中上個(gè)版本的文件。
lsFile.prototype.runstr = function(filetext){
this.eval(filetext)
lstorage.setItem(this.lname,filetext)
this.removels()
}
ajax同步獲取js文件內(nèi)容。
lsFile.prototype.xhr = function(url,callback){
var _this = this
var version = url.substring(url.lastIndexOf("?"))
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
switch(xhr.readyState){
case 4:
if(xhr.status==200){
var filetext = xhr.responseText
if(callback){
callback.call(_this,filetext)
}
}else{
alert('加載失敗')
}
break;
default:
break;
}
}
xhr.open('GET',url,false);
xhr.send();
}
刪除localStorage中上個(gè)版本的文件方法,通過(guò)名字規(guī)則查找,除了當(dāng)前設(shè)置的名字的之外有相同前綴的,通過(guò)removeItem刪除。
lsFile.prototype.removels = function(){
var arr = []
for(var i=0;i var name = lstorage.key(i);
if(name.indexOf(this.filename) > -1 && name != this.lname){
arr.push(name)
}
}
for(var i in arr){
localStorage.removeItem(arr[i]);
}
}
使用
lsFile('/demo/lsfile/zepto.js?20150620')
移動(dòng)端webapp使用
兼容性好
網(wǎng)速慢,LS讀取+eval大多數(shù)情況下快于304
瀏覽器緩存經(jīng)常會(huì)被清理,localStorage被清理的幾率低一些
添加回答
舉報(bào)