摘要:通过采用同步的形式获取内容,取得内容后,执行文件的内容,设置保存到中,再删除中上个版本的文件。同步获取文件内容。
利用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-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-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)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79735.html
摘要:私有缓存就是用户专享的,各级代理不能缓存的缓存。代表使用内存中的缓存,则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为。 作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 1 缓存 缓存从宏观上分为私有...
摘要:私有缓存就是用户专享的,各级代理不能缓存的缓存。代表使用内存中的缓存,则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为。 作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 1 缓存 缓存从宏观上分为私有...
摘要:私有缓存就是用户专享的,各级代理不能缓存的缓存。代表使用内存中的缓存,则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为。 作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 1 缓存 缓存从宏观上分为私有...
摘要:是手机端关系型数据库的最佳方案,各种手机都支持。但是目前手机端重量数据存储的唯一可商用方案。是里最新的数据存储规范,但不是基于,而是基于对象。与的标准相比,的扩展主要是为了跨域。有网友封装了一个框架,针对数据,在超过时自动切换到,参考。 总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案:cookie、localstorage、sessionstorage、w...
阅读 1279·2019-08-30 15:44
阅读 1954·2019-08-30 13:49
阅读 1625·2019-08-26 13:54
阅读 3442·2019-08-26 10:20
阅读 3190·2019-08-23 17:18
阅读 3265·2019-08-23 17:05
阅读 2073·2019-08-23 15:38
阅读 981·2019-08-23 14:35