1、sessionStorage、localStorage、cookie 之間的區(qū)別

相同點(diǎn)

• cookie 和 webStorage 都是用來存儲(chǔ)客戶端的一些信息

不同點(diǎn)

localStorage

localStorage 的生命周期是 永久的。也就是說 只要不是 手動(dòng)的去清除。localStorage 會(huì)一直存儲(chǔ)

sessionStorage

相反 sessionStorage 的生命周期 只是 臨時(shí)的 。只要是 當(dāng)前的 窗口 或者 標(biāo)簽頁 關(guān)閉話 就會(huì) 自動(dòng)清除。當(dāng)然這里面 涉及到 同源策略 的問題。

cookie

相對于 cookie 類似于 localStorage 但是又不完全 相同。cookie 是可以 設(shè)置 一個(gè) 過期時(shí)間。關(guān)閉瀏覽器后cookie 還是 存在的 。它會(huì)一直等到時(shí)間過期才會(huì) 銷毀。但是 cookie 會(huì)有 一個(gè) 大小的 限制。不同于sessionStorage、localStorage（一般是5M）但是 cookie （4k左右）不同瀏覽器也是不同的。

最重要的一點(diǎn) cookie 存儲(chǔ) 會(huì)出現(xiàn) 安全上的 問題。因?yàn)?cookie 會(huì) 傳給服務(wù)器的。

慎用之

2、sessionStorage、localStorage、cookie 簡單的使用方法

sessionStorage、localStorage 使用

localStorage和sessionStorage使用時(shí)使用相同的API 在這用 sessionStorage 舉例

1、設(shè)置一個(gè)值
sessionStorage.setItem('key','value')
2、獲取一個(gè)值
sessionStorage.getItem('key')
3、刪除一個(gè)值
sessionStorage.removeItem("key");
4、清空
localStorage.clear(); // 清除數(shù)據(jù)--刪除所有同源的本地存儲(chǔ)的localStorage數(shù)據(jù)
sessionStorage.clear();//清除數(shù)據(jù)---只清空當(dāng)前會(huì)話存儲(chǔ)的數(shù)據(jù)

cookie 的使用

1、設(shè)置 cookie 值的函數(shù)
function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
2、獲取 cookie 值的函數(shù)
function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}
3、刪除 cookie 
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();
}

本文結(jié)束 這里只是 sessionStorage、localStorage、cookie 這三者的 一些 簡單的 知識。如有不對，請指正