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

zhengyeye發表於2016-06-27
CookieSession

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），不太懂的時候也可以再看看；

相關文章