JavaScript本地儲存的方式有哪些
holden_zheng發表於2024-04-19
Web儲存技術
1. localStorage
- 特點：長期儲存，除非手動刪除否則會一直儲存在瀏覽器中，清除快取或解除安裝瀏覽器後消失。
- 儲存語法：
window.localStorage.setItem(名字,值)
- 獲取語法：
window.localStorage.getItem(名字)
- 刪除語法：
window.localStorage.removeItem(名字)
- 作用：刪除localStorage中的資料。
- 限制：只能儲存字串型別的資料。
- 應用場景：適用於儲存不需要跨會話訪問的資料，如使用者偏好設定、遊戲進度等。
2. sessionStorage
- 特點：會話儲存，瀏覽器關閉後資料消失，可以跨頁面通訊，但僅限於本頁面跳轉。
- 儲存語法：
window.sessionStorage.setItem(名字,值)
- 獲取語法：
window.sessionStorage.getItem(名字)
- 刪除語法：
window.sessionStorage.removeItem(名字)
- 應用場景：適用於儲存會話級別的資料，如使用者在會話期間的瀏覽記錄。
3. Cookie
- 特點：儲存字串，大小限制約4KB，儲存時效性預設為會話級別，可手動設定過期時間。
- 操作必須依賴伺服器：本地開啟的頁面不能操作cookie。
- 儲存語法：
document.cookie = 'key=value';
- 獲取語法：
document.cookie
- 應用場景：常用於識別使用者身份，如登入資訊的儲存。
4. IndexedDB
- 特點：低階API，用於儲存大量結構化資料，包括檔案/ blobs。
- 優點：儲存量理論上無上限，操作非同步，支援儲存JS物件。
- 缺點：操作繁瑣，有門檻。
- 應用場景：適用於儲存大量資料，如線上遊戲的存檔、網頁應用的資料庫等。