应用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)
    原文作者:小v
    原文地址: https://segmentfault.com/a/1190000005770330
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞