应用localStorage贮存js文件,只要在第一次接见该页面的时刻加载js文件,今后在接见的时刻加载当地localStorage实行
封装lsFile类 有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有无缓存文件,有的话直接getItem猎取,经由过程eval实行,没有话经由过程实行ajax猎取js文件内容。
lsFile.prototype.init = function(){
if (this.filetext){
this.eval(this.filetext)
}else{
this.xhr(this.url,this.runstr)
}
}
经由过程ajax采纳同步的情势猎取js内容,获得内容后,eval实行js文件的内容,setItem设置保存到localStorage中,再删除localStorage中上个版本的文件。
lsFile.prototype.runstr = function(filetext){
this.eval(filetext)
lstorage.setItem(this.lname,filetext)
this.removels()
}
ajax同步猎取js文件内容。
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中上个版本的文件要领,经由过程名字划定规矩查找,除了当前设置的名字的以外有雷同前缀的,经由过程removeItem删除。
lsFile.prototype.removels = function(){
var arr = []
for(var i=0;i<lstorage.length;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')
挪动端webapp运用
兼容性好
网速慢,LS读取+eval大多数情况下快于304
浏览器缓存常常会被清算,localStorage被清算的概率低一些
以下是完全代码
!function(w){
'use strict'
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()
}
lsFile.prototype.init = function(){
if (this.filetext){
this.eval(this.filetext)
}else{
this.xhr(this.url,this.runstr)
}
}
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();
}
lsFile.prototype.runstr = function(filetext){
this.eval(filetext)
lstorage.setItem(this.lname,filetext);
this.removels()
}
lsFile.prototype.removels = function(){
var arr = []
for(var i=0;i<lstorage.length;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.prototype.eval = function(filetext){
window.eval(filetext)
}
w.lsFile = function (url){
return new lsFile(url)
}
}(window)