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 の定義
現行の標準  

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android ?
clearChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android ?
getItemChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android ?
keyChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android ?
lengthChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android ?
removeItemChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android ?
setItemChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 3.2Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

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

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