Storage

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-tw/web/api/web_storage_api/index.md)

Web Storage API 中的 Storage 介面提供了存取特定 domain session 及本機儲存的方法。舉例而言，它能夠對存取的資料進行新增、刪除、修改，

在操作上，如果是對象是 domain session storage ，會呼叫 Window.sessionStorage 。而若是 local storage，則呼叫 Window.localStorage 。

屬性

Storage.length Read only

返回一數字，代表儲存在 Storage 中的物件的數量。

方法

Storage.key()

當傳入一數字 n, 會返回 storage 裡第 n 個值的 key 值。

Storage.getItem()

當傳入一 key 值, 會返回 storage 裡此 key 值對應的 value 。

Storage.setItem()

當傳入 key 及 value 的值, 會在 storage 裡新增此 key 及 value 值，若 key 已存在，則會把值更新成傳入的 value。

Storage.removeItem()

當傳入一 key 值, 會把此 key 從 storage 裡刪除。

Storage.clear()

執行此方法，會刪除所有在 storage 裡的 key。

範例

在這裡，我們藉由呼叫 localStorage 來存取 Storage 物件，首先使用 !localStorage.getItem('bgcolor') 來確認 storage 裡是否有項目存在。

如果有，則執行函示 setStyles() ，這個函示使用 Storage.getItem() 取得 storage 的值，並且用這些值更新頁面樣式 。

如果沒有，便執行另一個函示 populateStorage()，他使用 Storage.setItem() 先設定 storage 項目的值，然後才執行setStyles()。

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

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

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var 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 Demo.

規範

Specification
HTML Standard
# storage

瀏覽器相容性

BCD tables only load in the browser

See also