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的打賞,我們會更加努力! 如果您想成為作者,請點我