利用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文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。