JavaScriptのStorageは,ウェブストレージに関する操作を提供するオブジェクトである。

ウェブストレージとは、データをクライアント側に保存するキーバリュー型ストレージ(KVS: Key-Value Store)であり、HTML5から利用可能となった。ウェブストレージに保存できる容量はウェブブラウザによって異なるが、数メガバイト以上のデータを保存できる。ウェブストレージはセッションストレージとローカルストレージの2種類がある。

ウェブストレージのセッションストレージやローカルストレージに保存している内容は、Google Chromeのデベロッパーツールで確認できる。

IE (Internet Explorer)の場合,ローカルHTMLファイル(file:///で始まるURL)ではウェブストレージを使用できない。

セッションストレージ

セッションストレージは一時的にデータを保存することができ、ウェブブラウザのウィンドウを閉じるとデータが破棄される。同じページを複数のウィンドウで開いた場合、それぞれ別々のセッションストレージにデータが保存される。

JavaScriptでは,window.sessionStorageでセッションストレージを操作することができる。

ローカルストレージ

ローカルストレージは永続的にデータをローカル環境に保存する。

ローカルストレージはオリジン単位でデータが保存される。オリジンとはプロトコル、ドメイン名及びポート番号の組み合わせであり、「protocol://domain:portno」の形式で表される。たとえば、「http://itref.fc2web.com/javascript」と「http://itref.fc2web.com/javascript/storage.html」は同じローカルストレージを共有する。

JavaScriptでは,window.localStorageでローカルストレージを操作することができる。

Storageオブジェクトのプロパティ

Storageオブジェクトのプロパティ
Property Type Description
constructor Object Storageオブジェクトのコンストラクタへの参照
length Integer ウェブストレージに保存されているデータ(keyとvalueのペア)の個数

Storageオブジェクトのメソッド

Storageオブジェクトのメソッド
Method Description
clear 全てのデータをクリアする。
getItem 指定したkeyに対応するvalueを返す。
key 指定したインデックスのkeyを返す。
removeItem 指定したkeyに対応するvalueを削除する。
setItem 指定したkeyとvalueのペアをウェブストレージに保存する。

clear

ローカルストレージのすべてのデータをクリアする。

window.localStorage.clear()
localStorage.clear()

セッションストレージのすべてのデータをクリアする。

window.sessionStorage.clear()
sessionStorage.clear()

セッションストレージのデータをクリアする例を示す。

if (window.sessionStorage) {
  sessionStorage.clear();
}

ローカルストレージのデータをクリアする例を示す。

if (window.localStorage) {
  localStorage.clear();
}

getItem

指定したkeyに対応するvalueを返す。

getItem(key)

セッションストレージからkeyに対応するvalueを取得する例を示す。

if (window.sessionStorage) {
  var value = sessionStorage.getItem("foo");
  console.log(value);
}

ローカルストレージからkeyに対応するvalueを取得する例を示す。

if (window.localStorage) {
  var value = localStorage.getItem("foo");
  console.log(value);
}

removeItem

指定したkeyに対応するvalueを削除する。

removeItem(key)

セッションストレージからkeyとvalueのペアを削除する例を示す。

if (window.sessionStorage) {
  sessionStorage.removeItem("foo");
}

ローカルストレージからkeyとvalueのペアを削除する例を示す。

if (window.localStorage) {
  localStorage.removeItem("foo");
}

setItem

指定したkeyとvalueのペアをウェブストレージに保存する。

setItem(key, value)

セッションストレージにkeyとvalueのペアを保存する例を示す。

if (window.sessionStorage) {
  sessionStorage.setItem("foo", "bar");
}

ローカルストレージにkeyとvalueのペアを保存する例を示す。

if (window.localStorage) {
  localStorage.setItem("foo", "bar");
}
スポンサーリンク