cookie

基本概念

1. cookie非常小，限制在4kb左右，很多瀏覽器都限制一個站點最多保存20個cookie。
2. 如果沒有設置時間，則表示cookie的生命期為瀏覽器會話期間，關閉瀏覽器窗口，cookie就會消失，這種被稱為會話cookie，它會被保存在內存中。
3. 當設置了過期時間，瀏覽器會把cookie保存在硬盤中，關閉瀏覽器之后任然有效，直到超過設定的過期時間。

設置和獲取cookie的方法

原生

// 使用js創建cookie
document.cookie="username=John Doe";
// 添加一個過期時間
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
// 使用path 告訴瀏覽器cookie的路徑
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";


//讀取
var x = document.cookie;
// 修改  舊的值將會被覆蓋
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

// 刪除 刪除 cookie 非常簡單。您只需要設置 expires 參數為以前的時間即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

封裝

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;
}

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 "";
}

localStorage和sessionStorage

優勢

• 擴展了cookie的4k限制，為了更大的容量存儲而設計的，是在瀏覽器端存儲的數據
• 減少網絡流量，快速的讀取數據，性能較好，可以作為臨時存儲
• localStorage是永久性存儲，而sessionStorage屬于當會話結束的時候，就會被清空

劣勢

• 本質上是對字符串的讀取，內容較多的時候 會消耗內存，導致頁面變卡，
• 不能被爬蟲抓取到

三者的異同