天天看點

cookie/sessionStorage/localStorage 的差別及用法

差別

  1. 本地 cookie 可以跨浏覽器使用,可以設定有效期,可以跨标簽使用。
  2. sessionStorage 隻用來單頁面存儲資料
  3. localStorage 用來永久儲存資料

相同點

都是用來存儲資料!

用法

  1. cookie
//JS操作cookies方法! 

//寫cookies 

function setCookie(name,value) 
{ 
    var Days = ; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days****); 
    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[]); 
    else 
        return null; 
} 

//删除cookies 
function delCookie(name) 
{ 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - ); 
    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*); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
function getsec(str)
{ 
   alert(str); 
   var str1=str.substring(,str.length)*; 
   var str2=str.substring(,); 
   if (str2=="s")
   { 
        return str1*; 
   }
   else if (str2=="h")
   { 
       return str1***; 
   }
   else if (str2=="d")
   { 
       return str1****; 
   } 
} 
//這是有設定過期時間的使用示例: 
//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();
           

繼續閱讀