localStorage用于持久化的存儲；但是限時(shí)保存用戶的登錄信息藕坯，除了cookie和session伍纫，localStorage也可以做到；cookie字符長度有限制钳恕，并且不安全别伏；session依賴后端；現(xiàn)在我要在前端保存用戶信息忧额，而不用每次后臺判斷或前端請求去判斷厘肮；因?yàn)槿绻撁嬗汕岸溯敵觯敲疵看味嫉谜埱笠淮斡脩羰欠竦卿洠?下面是github看到的一個(gè)方法庫睦番，我把源碼分析一下类茂。
先介紹一些基本語法，localStorage API介紹：
localStorage.setItem(key,value);//存儲key值為value
localStorage.getItem(key)//獲取key值
localStoage.key(i)//獲取第i個(gè)key值
localStorage.removeItem(key)//刪除key值對應(yīng)的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()用來從一個(gè)json對象返回一個(gè)json形式字符串
return val === undefined || typeof val === "function" ? val+'' : JSON.stringify(val);
}
function deserialize(value){//JSON.parse用來解析一個(gè)JSON形式的字符串，返回一個(gè)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ù)組示启，關(guān)于類型判斷可以參考我前面的博客
return value instanceof Array;
}
function Store(){//返回一個(gè)實(shí)例化對象
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;//方便鏈?zhǔn)讲僮? },
get: function(key){//獲取key對應(yīng)的值
if(!key) {//如果key不存在就返回所有的key以及對應(yīng)的value
var ret = {};
this.forEach(function(key, val) {
ret[key] = val;
});
return ret;
}
return deserialize(storage.getItem(key));//返回一個(gè)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);//移除對應(yīng)的
even_storage('remove',key,val);
return val;
},
has:function(key){
return storage.hasOwnProperty(key);//判斷storage是否有key這個(gè)屬性
},
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值是否有對應(yīng)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;
