Storage

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') というコードを使用して、ローカルストレージにデータアイテムが含まれているかを確認します。含まれている場合は、Storage.getItem() を使用してデータアイテムを取得して、さらにそのデータを使用してページのスタイルを更新する setStyles() 関数を実行します。含まれていない場合は populateStorage() 関数を実行します。こちらは Storage.setItem() を使用してアイテムの値を設定してから、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

関連情報