利用localStorage本地储存js文件

利用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<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.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()}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 = 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();}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)

利用localStorage本地储存js文件相关推荐

怎压缩html文件夹,如何利用koala压缩合并js文件？
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 苏南大叔在很久之前的文章中,曾经向大家介绍过一款很好用的js和css处理工具,叫做koala.据说是国人基于n ...
漏刻有时数据可视化大屏常见问题(10)：geomap调用本地版js文件的操作说明
命名规则汉语拼音命名,地图标识为拼音. 如:德城区 decheng.js 地图标识:decheng 使用说明 1.将decheng.js引入通过script引入: 2.地图组件中修改对应的地图标识; ...
SpringBoot html中引用本地js文件失败的问题
1.问题描述想在项目中使用jquery,于是从jquery官网下载了最新版本(手动从浏览器中复制到本地的js文件中),并在html文件中添加了引用.目录及引用情况如图. <!DOCTYPE h ...
html 中引入外部 css 、js 文件
1. 引入 css 文件引入外部 css 文件代码如下,css文件引入代码应放在 <head></head> 中. <!-- 本地相对路径," ../ &qu ...
js利用本地储存开获取商品足迹
js利用本地储存开获取商品足迹步骤 1.在点击li时,产生一条历史访问记录1.1获取所有的商品的li标签.1.2获取商品详情1.3 将这条记录放入到localStorage中, 数组[] 转json ...
react本地储存_如何在React项目中利用本地存储
react本地储存以及为什么要这么做. 本地存储是现代Web浏览器固有的Web API. 它允许网站/应用程序在浏览器中存储数据(简单和有限),从而使数据在以后的浏览器会话中可用. 在开始学习本教程 ...
JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介定时器-延时函数 5秒关闭广告案例递归模拟setInterval函数两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
Node.js 在本地生成日志文件
文章目录 Node.js 在本地生成日志文件 1.前言 2.什么是 fs 3.new console.Console(stdout, stderr, ignoreErrors) 4.node.js 生 ...
根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...

利用localStorage本地储存js文件

利用localStorage本地储存js文件相关推荐

最新文章

热门文章