Web存储storage、cookie的综合使用

作为一个前端，storage存储及、浏览器cookie是经常用到的。storage存储由HTML5提出的，包含localStorage及seesionStorage存储。cookie属于较早浏览器数据存储技术，可用于后台数据交互。

优缺对比

localStorage
优：数据存储在本地电脑，只要不清除，永久存在
缺：因数据存储在本地，数据存储安全性没有保障
sessionStorage
优：属浏览器会话数据存储，数据不在本地保存
缺：只要关闭浏览会话（关闭网页），数据即清除
cookie
优：属浏览器会话数据存储，可与后台程序数据交互，可设置有数据效时间
缺：关闭浏览器即清除，读写操作较麻烦

WEB存储API封装

var store={
    //本地存储
    local:{
        get:function(key){
            //key查询的键名
            if(!localStorage.getItem(key)){
                console.log('Not Found This Key!')
                return null;
            }else{
                return localStorage.getItem(key);
            }
        },
        set:function(key,val){
            //key设置的键名，val相应的值
            if(typeof val =='object'){
                val=JSON.stringify(val);
            }
            localStorage.setItem(key,val);
        },
        remove:function(key){
            //key移除的键名
            localStorage.removeItem(key);
        },
        clear:function(){
            localStorage.clear();
        }
    },
    //session存储
    session:{
        get:function(key){
            //key查询的键名
            if(!sessionStorage.getItem(key)){
                console.log('Not Found This Key!')
                return null;
            }else{
                return sessionStorage.getItem(key);
            }
        },
        set:function(key,val){
            //key设置的键名，val相应的值
            if(typeof val =='object'){
                val=JSON.stringify(val);
            }
            sessionStorage.setItem(key,val);
        },
        remove:function(key){
            //key移除的键名
            sessionStorage.removeItem(key);
        },
        clear:function(){
            sessionStorage.clear();
        }
    },
    //cookie存储
    cookie:{
        get:function(key){
            //key查询的键名
            var str,reg=new RegExp("(^| )"+key+"=([^;]*)(;|$)");
            if(document.cookie&&document.cookie.match(reg)!=null){
                str=document.cookie.match(reg)[0];
                var starti=str.indexOf('=')+1;
                var endi=str.indexOf(';')!=-1?str.length-1:str.length;
                str=str.slice(starti,endi);
            }else{
                str=null;
            }
            return str&&unescape(str);
        },
        set:function(key,val,s){
            //key设置的键名，val相应的值，s设置的时间（s参数可省略）
            if((typeof val) =='object'){
                val=JSON.stringify(val);
            }
            var time='';
            if(s){
                s=new Date(s);
                time=s.toGMTString();
            }
            document.cookie=key+'='+escape(val)+';expires='+time;
        },
        remove:function(key){
            //key移除的键名
            var val=this.get(key);
            var time=new Date();
            time.setTime(time.getTime()-1)
            if(val){
                document.cookie= key + "="+val+";expires="+time.toGMTString();
            }
        }
    }
}
//引入全局
window._STORE=store;

这样就可以简单方便的使用storage、cookie了，例：

_STORE.local.get('name');//获取本地存储name的值
_STORE.local.set('name','小明');//设置本地存储name的值

……