localStorage用于持久化的存储；但是限时保存用户的登录信息，除了cookie和session，localStorage也可以做到；cookie字符长度有限制，并且不安全；session依赖后端；现在我要在前端保存用户信息，而不用每次后台判断或前端请求去判断；因为如果页面由前端输出，那么每次都得请求一次用户是否登录； 下面是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来判断是否是函数
return ({}).toString.call(value) === "[object Function]";
}
function isArray(value) {//通过instance来判断是否是数组，关于类型判断可以参考我前面的博客
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值数组
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){//根据传入参数形式，快捷访问
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;
