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

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 接口使用更方便。