cookie、 sessionStorage 、localStorage之間的差別和使用

1.cookie:存儲在使用者本地終端上的資料。有時也用cookies，指某些網站為了辨識使用者身份，進行session跟蹤而存儲在本地終端上的資料，通常經過加密。一般應用最典型的案列就是判斷注冊使用者是否已經登過該網站。

2.HTML5 提供了兩種在用戶端存儲資料的新方法：(http://www.w3school.com.cn/html5/html_5_webstorage.asp)...兩者都是僅在用戶端（即浏覽器）中儲存，不參與和伺服器的通信；

• localStorage - 沒有時間限制的資料存儲,第二天、第二周或下一年之後，資料依然可用。
• 如何建立和通路 localStorage：

• <script type="text/javascript">
  localStorage.lastname="Smith";
  document.write(localStorage.lastname);
  </script>      

  下面的例子對使用者通路頁面的次數進行計數：

• <script type="text/javascript">
  if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
  else{
    localStorage.pagecount=1;
    }
  document.write("Visits "+ localStorage.pagecount + " time(s).");
  </script>      

• sessionStorage - 針對一個 session 的資料存儲,當使用者關閉浏覽器視窗後，資料會被删除。
• 建立并通路一個 sessionStorage：

• <script type="text/javascript">
    sessionStorage.lastname="Smith";
    document.write(sessionStorage.lastname);
  </script>      

  下面的例子對使用者在目前 session 中通路頁面的次數進行計數：

• <script type="text/javascript">
  if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }
  else{
    sessionStorage.pagecount=1;
    }
  document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
  </script>      

• sessionStorage 、localStorage 和 cookie 之間的差別

  共同點：都是儲存在浏覽器端，且同源的。

• 差別：cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在浏覽器和伺服器間來回傳遞；cookie資料還有路徑（path）的概念，可以限制cookie隻屬于某個路徑下。存儲大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，是以cookie隻适合儲存很小的資料，如會話辨別。
• 而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
• 資料有效期不同，sessionStorage：僅在目前浏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或浏覽器關閉也一直儲存，是以用作持久資料；cookie隻在設定的cookie過期時間之前一直有效，即使視窗或浏覽器關閉。
• 作用域不同，sessionStorage不在不同的浏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。Web Storage 支援事件通知機制，可以将資料更新的通知發送給監聽者。Web Storage 的 api 接口使用更友善。

附上自認為還可以的資料：（https://segmentfault.com/a/1190000002723469），不太懂的時候也可以再看看；

作者：鄭葉葉

出處：http://www.cnblogs.com/zhengyeye

本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。