localStorage 和 sessionStorage 操作方法與介紹

前言 - Prologue

在網頁應用程式中，經常需要在不同的頁面或訪問之間保存用戶數據。Web Storage API 提供了一種簡單的方式來儲存和管理用戶數據，其中最常見的兩種儲存方式是 localStorage 和 sessionStorage。

localStorage 提供了永久性的儲存，而 sessionStorage 則提供了暫時性的儲存。這些儲存方式可以幫助開發者在瀏覽器中存儲和獲取資料，以達到更好的使用者體驗。

正文 - Main text

localStorage 和 sessionStorage 都是 Web Storage API 的一部分，它們提供了一種在用戶瀏覽器中儲存和檢索鍵值對的機制。這些儲存空間是執行在用戶瀏覽器中的客戶端儲存，不需要對服務器進行請求。這意味著這些儲存空間在瀏覽器關閉之前一直存在。

localStorage 和 sessionStorage 之間的主要區別是數據的生命週期和範圍。localStorage 中儲存的數據是持久的，直到用戶顯式地刪除它們，而 sessionStorage 中儲存的數據只在用戶會話期間有效。當用戶關閉瀏覽器窗口或標籤時，會話期間結束，sessionStorage 中的數據也會被刪除。

localStorage 的儲存空間大小為 5 MB，而 sessionStorage 則是在當前會話中的頁面間共享，因此儲存空間大小也相對較小。它們都是使用 window.localStorage 和 window.sessionStorage 屬性來存取，並提供了類似於 JavaScript 物件的 API，包括 setItem、getItem、removeItem、clear 等方法。

除了使用瀏覽器開發者工具進行修改外，當其中一方使用 setItem 方法設置 localStorage 或 sessionStorage 時，另一方可以透過 window.addEventListener('storage', callback) 來監聽 storage 事件，當儲存空間被修改時，就會觸發該事件，並執行對應的 callback 函式。

在使用 localStorage 和 sessionStorage 時，需要注意的是它們只能儲存字串形式的資料，因此需要使用 JSON.stringify 和 JSON.parse 方法來轉換為 JSON 格式的字串進行儲存。另外，由於資料是存儲在瀏覽器端的，因此安全性也需要考慮，例如不要將敏感資料存儲在 localStorage 或 sessionStorage 中。

使用這些 Web Storage API，可以輕鬆地存儲和獲取用戶的偏好設置、網站狀態、用戶設置等等，這些數據對於構建更好的用戶體驗非常重要。

localStorage

localStorage 為一個瀏覽器本地儲存空間，可以儲存較大量的資料。當瀏覽器關閉後，localStorage 中的資料不會被刪除，下次再開啟瀏覽器時，資料仍然存在。

存值

// 將值存儲在 localStorage 中
localStorage.setItem('key', 'value');

取值

// 從 localStorage 中讀取值
const value = localStorage.getItem('key');

刪除單一值

// 從 localStorage 中刪除單一值
localStorage.removeItem('key');

刪除全部值

// 刪除 localStorage 中的所有值
localStorage.clear();

獲取全部值

// 獲取 localStorage 中的所有值
const keys = Object.keys(localStorage);

sessionStorage

sessionStorage 為一個與瀏覽器窗口關聯的本地儲存空間，存儲的資料只在當前瀏覽器窗口有效，當瀏覽器窗口被關閉後，資料也隨之被刪除。

存值

// 將值存儲在 sessionStorage 中
sessionStorage.setItem('key', 'value');

取值

// 從 sessionStorage 中讀取值
const value = sessionStorage.getItem('key');

刪除單一值

// 從 sessionStorage 中刪除單一值
sessionStorage.removeItem('key');

刪除全部值

// 刪除 sessionStorage 中的所有值
sessionStorage.clear();

獲取全部值

// 獲取 sessionStorage 中的所有值
const keys = Object.keys(sessionStorage);

參考資料 - Reference

[1] Window.sessionStorage - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

[2] Window.localStorage - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[3] W3Schools - Web Storage API

https://www.w3schools.com/html/html5_webstorage.asp

[5] JavaScript.info - LocalStorage 和 SessionStorage

https://javascript.info/localstorage

相關筆記

[Day 17] 如何讓 iframe 在不影響外部的情況下關閉 - 嘗試 30 日寫文充版挑戰

Web Storage API 是什麼？

localStorage 和 sessionStorage 操作方法與介紹

localStorage 和 sessionStorage 差異與特點

localStorage 和 sessionStorage 儲存大小限制