Storage

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

Web Storage API 的 Storage 介面提供了對特定域的會話儲存或本地儲存的訪問。例如，它允許新增、修改或刪除儲存的資料項。

例如，要操作某個域的會話儲存，需要呼叫 Window.sessionStorage；而對於本地儲存，則呼叫 Window.localStorage。

例項屬性

Storage.length 只讀: 返回一個整數，表示 Storage 物件中儲存的資料項數量。

例項方法

Storage.key(): 傳入一個數字 n，此方法將返回儲存中第 n 個鍵的名稱。
Storage.getItem(): 傳入一個鍵名，將返回該鍵的值。
Storage.setItem(): 傳入一個鍵名和值，將把該鍵新增到儲存中，或者如果該鍵已存在，則更新其值。
Storage.removeItem(): 傳入一個鍵名，將從儲存中移除該鍵。
Storage.clear(): 呼叫此方法將清空儲存中的所有鍵。

在此，我們透過呼叫 localStorage 來訪問一個 Storage 物件。我們首先使用 !localStorage.getItem('bgcolor') 測試本地儲存是否包含資料項。如果包含，我們執行一個名為 setStyles() 的函式，該函式使用 Storage.getItem() 獲取資料項，並使用這些值更新頁面樣式。如果不包含，我們執行另一個函式 populateStorage()，該函式使用 Storage.setItem() 設定項值，然後執行 setStyles()。

if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}

注意： 要檢視此功能的完整工作示例，請參閱我們的 Web Storage 演示。

規範

規範
HTML # storage

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2024年7月26日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題