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.

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