利用localStorage本地储存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<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.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<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)