前端持久化登錄信息localstorage方法

localStorage用于持久化的存儲;但是限時保存用戶的登錄信息,除了cookie和session,localStorage也可以做到;cookie字符長度有限制,并且不安全;session依賴后端;現(xiàn)在我要在前端保存用戶信息,而不用每次后臺判斷或前端請求去判斷;因為如果頁面由前端輸出,那么每次都得請求一次用戶是否登錄; 下面是github看到的一個方法庫,我把源碼分析一下。

先介紹一些基本語法,localStorage API介紹:

localStorage.setItem(key,value);//存儲key值為value
localStorage.getItem(key)//獲取key值
localStoage.key(i)//獲取第i個key值
localStorage.removeItem(key)//刪除key值對應的value
localStorage.clear()//清空localStorage所有的值
/*sessionStorage用法API相同*/
if(!window.localStorage) return;//不支持localStorage返回
var storage = window.localStorage,store,_api,even_storage=function(){};
function isJSON(obj){//通過typeof object.prototype.toString來判斷obj是否是json形式,說白了就是判斷是否有對象。
    return typeof(obj) === "object" && Object.prototype.toString.call(obj).toLowerCase() && !obj.length;
}
function stringify (val) {//JSON.stringfy()用來從一個json對象返回一個json形式字符串
    return val === undefined || typeof val === "function" ? val+'' : JSON.stringify(val);
}
function deserialize(value){//JSON.parse用來解析一個JSON形式的字符串,返回一個json形式對象
    if (typeof value !== 'string') { return undefined ;}
    try {
           return JSON.parse(value) ;
     }
    catch(e) {
         return value || undefined ;
    }
}
function isFunction(value) {//通過object.prototype.toString.call來判斷是否是函數(shù)
       return ({}).toString.call(value) === "[object Function]";
 }
function isArray(value) {//通過instance來判斷是否是數(shù)組,關于類型判斷可以參考我前面的博客
       return value instanceof Array;
}

function Store(){//返回一個實例化對象
    if(!(this instanceof Store)){
        return new Store();
    }
}

Store.prototype = {
    set: function(key, val){//存儲信息
        if (!val&&!key) { return this.remove(key) ;}
        even_storage('set',key,val);
        if(key&&val){
            storage.setItem(key, stringify(val));//存儲
        }else if(key&&isJSON(key)&&!val){//JSON形式存儲
            for (var a in key) this.set(a, key[a]);
        }
        return this;//方便鏈式操作
    },
    get: function(key){//獲取key對應的值
        if(!key) {//如果key不存在就返回所有的key以及對應的value
            var ret = {};
            this.forEach(function(key, val) {
                ret[key] = val;
            });
            return ret;
        }
        return deserialize(storage.getItem(key));//返回一個json形式對象
    },
    clear: function(){
        this.forEach(function(key, val) {
            even_storage('clear',key,val);
        });
        storage.clear();//清空
        return this;
    },
    remove: function(key) {
        var val = this.get(key);
        storage.removeItem(key);//移除對應的
        even_storage('remove',key,val);
        return val;
    },
    has:function(key){
            return storage.hasOwnProperty(key);//判斷storage是否有key這個屬性
    },
    keys:function(){//返回所有key值數(shù)組
        var d=[];
        this.forEach(function(k, list){
            d.push(k);
        });
        return d;
    },
    size: function(){
         return this.keys().length;
    },//返回長度
    forEach: function(callback) {//遍歷localstorage,讓callback作用于
        for (var i=0; i<storage.length; i++) {
            var key = storage.key(i);
            if(callback(key, this.get(key))===false) break;
        }
        return this;
    },
    search: function(str) {//判斷key值是否有對應str,如果有返回值
        var arr = this.keys(),dt= {};
        for (var i = 0; i < arr.length; i++) {
            if(arr[i].indexOf(str)>-1) dt[arr[i]]=this.get(arr[i]);
        }
        return dt;
    },
    onStorage: function(cb){
        if(cb && isFunction(cb)) even_storage = cb;
        return this;
    }
}

store = function(key, data){//根據(jù)傳入?yún)?shù)形式,快捷訪問
    var argm = arguments,
         _Store = Store(),
         dt = null;
    if(argm.length ===0) return _Store.get();
    if(argm.length ===1){
        if(typeof(key) === "string") return _Store.get(key);
        if(isJSON(key)) return _Store.set(key);
    }
    if(argm.length === 2 && typeof(key) === "string"){
        if(!data)return _Store.remove(key);
        if(data&&typeof(data) === "string")return _Store.set(key,data);
        if(data&&isFunction(data)) {
            dt = null
            dt = data(key,_Store.get(key))
            return dt?store.set(key, dt):store;
        }
    }
    if(argm.length === 2 && isArray(key) && isFunction(data)){
        for (var i = 0; i < key.length; i++) {
            dt = data(key[i],_Store.get(key[i]))
            store.set(key[i], dt)
        }
        return store
    }
}
for (var a in Store.prototype) store[a] = Store.prototype[a];
return store;
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容