localStorage 和 sessionStorage 差異與特點

差異與特點

以下是 localStorage 和 sessionStorage 的差異與特點：

儲存空間

	localStorage	sessionStorage
儲存空間	永久性儲存	暫時性儲存

• localStorage：資料不會因瀏覽器關閉而消失，除非手動刪除或清空。
• sessionStorage：僅在當前瀏覽器視窗或頁面有效，瀏覽器關閉後自動清除。

儲存大小

• localStorage：通常限制在 5MB ~ 10MB，不同瀏覽器大小限制不同。
• sessionStorage：大小限制通常與 localStorage 相同，但也與瀏覽器版本和設定有關。

詳細可參考結尾相關筆記

存取方式

localStorage 和 sessionStorage 都是透過 JavaScript 的 API 進行存取。

資料儲存方式

• localStorage 和 sessionStorage 都以 key-value 形式儲存資料，key 和 value 均為字串。
• 資料儲存時，可以使用 JSON.stringify() 將資料轉換為字串格式，再使用 JSON.parse() 解析為物件。

資料存取方式

	localStorage	sessionStorage
存取資料	localStorage.setItem(key, value)	sessionStorage.setItem(key, value)
取得資料	localStorage.getItem(key)	sessionStorage.getItem(key)
刪除單一資料	localStorage.removeItem(key)	sessionStorage.removeItem(key)
刪除所有資料	localStorage.clear()	sessionStorage.clear()

• 存取資料：設置 key-value。
• 取得資料：取得 value。
• 刪除單一資料：刪除指定 key 的資料。
• 刪除所有資料：清空所有資料。

注意事項

不同瀏覽器的 localStorage 和 sessionStorage 可能具有不同的限制和表現方式，需特別注意。

存放敏感資料時，應該避免使用 localStorage 和 sessionStorage，以防被惡意攻擊或竊取資料。

使用 localStorage 和 sessionStorage 時，要特別注意瀏覽器的隱私設定和安全性，避免濫用造成資料外洩或損失。

補充說明

1.　兩者的儲存空間大小一般為 5MB，但實際大小還取決於瀏覽器的設定和硬體限制。

2.　如果要在多個網頁之間共享資料，建議使用 localStorage 而不是 sessionStorage。

3.　在網頁被關閉之前，使用 localStorage 或 sessionStorage 儲存的資料都不會被刪除。但是，如果瀏覽器因為某些原因（例如清除緩存、刪除 Cookie 等）而清除了資料，則這些資料也會被刪除。

4.　如果瀏覽器的隱私模式被啟用，localStorage 和 sessionStorage 也會被禁用，因此在這種情況下使用這兩種儲存空間可能會出現問題。

參考資料

[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 儲存大小限制