發布於 2023-03-07

更新於 2023-03-18

程式

約485字 (3分鐘閱讀)

Web Storage API 是什麼?

Title Image

Photo by Kama on Can I use...

前言 - Prologue

當我們需要在瀏覽器中儲存資料時,可以使用 Web Storage API 提供的 localStorage 和 sessionStorage 兩種儲存方式。它們都是將資料以鍵值對的形式儲存在瀏覽器中,且可以在同一網域名下的所有網頁中存取和修改。

正文 - Main text

Web Storage API 提供了設置、讀取、刪除、監聽儲存空間變化等功能。使用 Web Storage API 可以方便地實現在本地端儲存使用者資料的需求,如網站設置、使用者偏好設置等,包含兩種儲存方式:localStorage 和 sessionStorage。

以下是 Web Storage API 常用的操作方法:

  • localStorage.setItem(key, value):設置一個 key-value 對應的 localStorage 值。
  • localStorage.getItem(key):獲取指定 key 的 localStorage 值。
  • localStorage.removeItem(key):刪除指定 key 的 localStorage 值。
  • localStorage.clear():刪除所有 localStorage 值。
  • sessionStorage.setItem(key, value):設置一個 key-value 對應的 sessionStorage 值。
  • sessionStorage.getItem(key):獲取指定 key 的 sessionStorage 值。
  • sessionStorage.removeItem(key):刪除指定 key 的 sessionStorage 值。
  • sessionStorage.clear():刪除所有 sessionStorage 值。

Web Storage API 提供了簡單易用的本地端資料儲存方案,讓開發人員能更輕鬆地在使用者瀏覽器中儲存、獲取、刪除使用者資料。localStorage 和 sessionStorage 是 Web Storage API 中兩個常用的儲存方式,它們提供了簡單易用的 API 和儲存空間,可以方便地在瀏覽器中存儲資料。在實際應用中,需要根據具體情況選擇使用哪種儲存方式,並注意相關的安全性和兼容性問題。

參考資料 - 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 儲存大小限制

Read more from 程式
lightbox-image
Toggle Button - Red Pandas Icons by svgrepo.com

Copyrights © 2023 Kama, All Rights Reserved.