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

梦里花落0921

利用localStorage储存js文件，只有在第一次访问该页面的时候加载js文件，以后在访问的时候加载本地localStorage执行封装lsFile类 有url、filename(key前缀)、lname(key)、filetext(值)属性var lstorage = window.localStoragefunction lsFile(url){this.url = urlthis.filename = url.substring(url.lastIndexOf("/")+1,url.lastIndexOf("."))//this.filename = document.location.pathnamethis.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 = thisvar version = url.substring(url.lastIndexOf("?"))var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){switch(xhr.readyState){case 4:if(xhr.status==200){var filetext = xhr.responseTextif(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被清理的几率低一些