HTML5之Web本地儲存

HTML5之Web本地儲存

---

• 什麼是HTML5web存儲？
  • HTML5web存儲可以在本地儲存用戶的瀏覽數據。web儲存相對cookie更加的安全與快速，它的數據不會保存在服務器上。他也可以存儲大量的數據，而不影響網站的性能。
• 客戶端儲存數據之localStorage
  • 用於長久保存網站的數據，保存的數據沒有過期時間，可手動刪除
  • 常用API：
    • 保存數據：localStorage.setltem(key，value)；
    • 讀取數據；localStorage.getltem(key);
    • 刪除單個數據：localStorage.removeltem(key);
    • 刪除所有數據：localStorage.clear();
    • 得到某個索引的key：localStorage.key(index);
  • 提示：鍵/值對通常以字符串儲存
• 客戶端儲存數據之sessionStorage
  • sessionStorage儲存的數據在用戶關閉瀏覽器窗口後，數據會被刪除
  • api如localStorage相同
• cookie，localStorage以及sessionStorage的區別
  • 共同點：都是保存在瀏覽器端，且是同源共享的
  • 區別：
    • cookie數據會在瀏覽器和服務器之間進行傳遞，每次http請求都會攜帶cookie，而sessionStorage和localStorage僅在客戶端保存，不參與服務器通信。
    • 存儲大小限制也不同，cookie數據不能超過4k，sessionStorage和localStorage的大小一般是5M
    • 數據的週期時間不同，cookie數據在設置的過期時間內一直有效，sessionStorage數據會在當前瀏覽器窗口時清除，localStorage數據則始終存在，即使關閉瀏覽器或窗口，直到手動清除數據
    • cookie相比其他兩個安全性不高，容易被攔截獲取