cookie/sessionStorage/localStorage 的区别及用法

区别

1. 本地 cookie 可以跨浏览器使用，可以设置有效期，可以跨标签使用。
2. sessionStorage 只用来单页面存储数据
3. localStorage 用来永久保存数据

相同点

都是用来存储数据！

用法

1. cookie

//JS操作cookies方法! 

//写cookies 

function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 

//读取cookies 
function getCookie(name) 
{ 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]); 
    else 
        return null; 
} 

//删除cookies 
function delCookie(name) 
{ 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) 
        document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
} 
//使用示例 
setCookie("name","hayden"); 
alert(getCookie("name")); 

//如果需要设定自定义过期时间 
//那么把上面的setCookie　函数换成下面两个函数就ok; 


//程序代码 
function setCookie(name,value,time)
{ 
    var strsec = getsec(time); 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + strsec*1); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
function getsec(str)
{ 
   alert(str); 
   var str1=str.substring(1,str.length)*1; 
   var str2=str.substring(0,1); 
   if (str2=="s")
   { 
        return str1*1000; 
   }
   else if (str2=="h")
   { 
       return str1*60*60*1000; 
   }
   else if (str2=="d")
   { 
       return str1*24*60*60*1000; 
   } 
} 
//这是有设定过期时间的使用示例： 
//s20是代表20秒 
//h是指小时，如12小时则是：h12 
//d是天数，30天则：d30 

setCookie("name","hayden","s20");

1. sessionStorage 和 localStorage

//要判断浏览器是否支持localStorage可以使用下面的代码：

if(window.localStorage){ 
    alert("浏览支持localStorage") 
 }else{    
    alert("浏览暂不支持localStorage") 
  } 
  //或者 
if(typeof window.localStorage == 'undefined'){     
  alert("浏览暂不支持localStorage") 
}
sessionStorage.setItem("key", "value");     localStorage.setItem("site", "js8.in");

sessionStorage.getItem("key");  localStorage.getItem("site");

sessionStorage.removeItem("key");   localStorage.removeItem("site");
// 删除全部
sessionStorage.clear();
localStorage.clear();