tomcat .appcache html5离线缓存,从Tomcat的缓存中如何获取js文件并保存到本地

利用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 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被清理的几率低一些