Html本地儲存/快取
html儲存/快取可以存放在html伺服器和客戶端，其作用體現在減少網路頻寬消耗、降低伺服器壓力和減少網路延遲，加快頁面開啟速度，存放某些鍵值對或者唯一辨識碼等方面。
目前常用的快取/本地儲存有 localstorage、sessionstorage、cookie和manifest 技術
1.cookies
Cookie 是一些資料, 儲存於你電腦上的文字檔案中。當 web 伺服器向瀏覽器傳送 web 頁面時，在連線關閉後，服務端不會記錄使用者的資訊。Cookie 的作用就是用於解決 “如何記錄客戶端的使用者資訊”:
大小限制：4k 用於儲存小資料
使用方法有：
var x = document.cookie; 獲取所有cookie document.cookie="keyName=keyValue"; 建立和修改 cookie document.cookie = "keyName=; expires=Thu, 01 Jan 1970 00:00:00 GMT";設定 expires 引數為以前的 時間，使Cookie過期自動刪除
2.sessionstorage
SessionStorage用於本地儲存一個會話中的資料，這些資料只有在同一個會話中的頁面才能訪問並且會話結束，視窗關閉後，資料就會消失。是一種會話級別的儲存。
大小限制：每個域名5M 用於儲存瀏覽器關閉就會消失的資料
使用方法有：
sessionStorage.setItem("keyName", "keyValue"); 儲存
sessionStorage.getItem("keyName"); 獲取資料
sessionStorage.removeItem("keyName"); 刪除指定資料
sessionStorage.clear(); 清空全部資料
3.localstorage
LocalStorage是永久性的本地快取，儲存在客戶端的瀏覽器上，除非主動刪除，是不會過期的。LocalStorage採用的是鍵值對的方式進行儲存，儲存方式只能是字串。儲存內容可以用圖片、json、樣式、指令碼等。
大小限制：每個域名5M 用於儲存長時間保留的資料
使用方法有：
localStorage.setItem(keyName, keyValue) 儲存 localStorage.getItem(keyName) 獲取資料 localStorage.removeItem(keyName) 刪除指定資料 localStorage.clear()清空全部資料 localStorage.key(N)獲取第N個數據的key鍵值
4.manifest
HTML5 引入了應用程式快取，這意味著 Web 應用程式可以被快取，然後在無網際網路連線的時候進行訪問。使用者可以在離線時使用應用程式，快取的資源可以更快地載入，瀏覽器只從伺服器上下載已更新/已更改的資源。
使用方法:
<html manifest="URL"> 文件的快取 manifest 的地址。
cookie 與 webStorage 區別
1、cookie資料始終在同源的http請求中攜帶，cookie在瀏覽器和伺服器端來回傳遞，而localstorage和sessionstorage不會自動把資料傳送給伺服器端，僅在本地儲存。
2、儲存大小限制不同，cookie的儲存資料大小要求不能超過4k,每次的http請求都會攜帶cookie,所以儲存的資料需要比較小。sessionstorage和localstorage儲存資料大小限制比cookie要大，可以達到5M或者更大，不同瀏覽器設定可能不同。
3、資料生命週期。cookie的生命週期一般在其設定的過期時間之前有效。而sessionstorage僅在關閉視窗前有效，localstorage持久有效，直到手動刪除。
4、作用域不同，sessionstorage不在不同瀏覽器中共享，即使是同一頁面也不支援。而localstorage在所有同源視窗中都是共享的，同樣，cookie在所有同源視窗中也是可以共享的。
5、cookie的資料還有路徑的概念，可以通過設定限制cookie只屬於某個路徑
6、webstorage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。
轉載時請註明出處及相應連結，本文永久地址：https://blog.yayuanzi.com/25277.html
微信打賞
支付寶打賞
感謝您對作者Miya的打賞，我們會更加努力！ 如果您想成為作者，請點我