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() を実行します。

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 をご覧ください。

仕様

仕様書 策定状況 コメント
HTML Living Standard
Storage の定義
現行の標準  

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応4123.5810.54
clear4123.5810.54
getItem4123.5810.54
key4123.5810.54
length4123.5810.54
removeItem4123.5810.54
setItem4123.5810.54
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1818136113.2 ?
clear1818136113.2 ?
getItem1818136113.2 ?
key1818136113.2 ?
length1818136113.2 ?
removeItem1818136113.2 ?
setItem1818136113.2 ?

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, yyss
最終更新者: Uemmra3,