JavaScript Web Storage API

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

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

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

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

セッションストレージ

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

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

sessionStorageはセッションストレージ用Storageオブジェクトで、HTML5で追加されたプロパティである。

// ウェブストレージに対応している?
if (window.sessionStorage) {
  var ss = window.sessionStorage;
  console.log(ss);
}

ローカルストレージ

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

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

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

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

length

ウェブストレージに保存されているデータ(keyとvalueのペア)の個数

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

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");
}