Web Storage－HTML5のAPI、および、関連仕様

Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みです。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。

Web Storageを利用すると、ユーザーごとにカスタマイズされた情報を提供することが可能となります。 この仕組みはクッキー（HTTP cookie）とよく似ていますが、クッキーに比べて保存できる容量が大きいため、 例えば、オフラインでもウェブアプリケーションを動作させられるだけの 必要十分なデータをユーザーのローカル環境に保存することなどが可能となります。

Web Storageには、sessionStorageとlocalStorageの２種類のストレージが用意されています。 どちらもキー（key）と値（value）をペアにしたデータのリストを ユーザーのローカル環境に保存するkey-value型のデータ保存形式である点は同じですが、 データの有効期限などが異なるので目的に応じて使い分けます。

  別ウィンドウでの
データ共有		 データの
有効期限		 データ量
の上限		 サーバーへの
データ送信
クッキー ○ 指定期限まで有効 4KB サーバーへアクセスするたびに毎回自動送信
sessionStorage × ウィンドウやタブを閉じるまで有効 1オリジン当たり5MB 必要時のみスクリプトやフォームなどで送信
localStorage ○ 永続的に有効

sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージです。 ウィンドウやタブが開いている間のみデータが保存され、閉じるとデータが失われます。 同じドメインのサイトを別々のウィンドウで開いている場合には、それぞれが別のsessionStorageとなります。 クッキーとは異なり、ウィンドウ間でデータが共有されることはありません。

sessionStorageを利用する一例を挙げてみます。 例えば、2つのウィンドウで同じサイトを開きながら航空券を注文する場合、 クッキーでは買い物かご情報が混在してしまって、同じフライトのチケットを気づかずに2枚注文してしまう可能性があります。

sessionStorageでは、それぞれが別のセッションとなるため、 別ウィンドウの買い物かご情報が混在してしまうことがありません。

localStorageは、オリジン単位でデータを永続的に保存するストレージです。 オリジンとは、「http://www.example.com:80」のような「プロトコル://ドメイン名:ポート番号」のことです。 オリジンが同じであれば別ウィンドウでもデータを共有でき、ブラウザを終了してもデータは失われません。 データ保存量の上限はブラウザへの推奨値が1オリジン当たり5MBとされており、 クッキーの4KBに比べるとより大きなデータを保存できるようになっています。

localStorageを利用する一例を挙げてみます。 例えば、ウェブメールにおけるメールの送受信データのような比較的大きなデータの場合、 クッキーでは保存できるデータ量に上限があるため、すべてのデータをローカル環境に保存することは困難です。 また、クッキーではユーザーがアクセスする度にデータがサーバーに送信されるため、セキュリティの観点からも好ましくありません。

localStorageでは、ローカル環境に5MBまでのデータを永続的に保存でき、 ユーザーのアクセスの度にデータがサーバーに送信されることがありません。 ウェブメールの例で言えば、localStorageなら送受信データをローカル環境に保存でき、 オフラインウェブアプリケーションと組み合わせることで、オフラインでのメール閲覧なども可能となるでしょう。

Web Storageで指定できる命令は、データの保存・保存したデータの取得・指定キーの値削除・全クリアのいずれかです。 それぞれの命令を指定するメソッドは以下の通りです。 メソッド・属性は、sessionStorageとlocalStorageで共通となります。

getItem(key) …… keyに対応するvalueを取得する

setItem(key, value) …… keyとvalueをペアにしてデータを保存する

removeItem(key) …… keyに対応するvalueを削除する

clear() …… データをすべてクリアする

Web Storageのメソッド・属性の一覧

例えば、useridというキー（key）と、1111という値（value）をペアにして保存する場合には、 以下のように指定します。 

//変数storageにsessionStorageを格納
var storage = sessionStorage;

//useridというキーに1111という値を割り当てて保存
storage.setItem('userid', '1111');

//後からvalueを変更してセットし直せば上書き保存される
storage.setItem('userid', '2222');

//useridというキーの値を取得する（2222が返るはず）
storage.getItem('userid');

//useridというキーの値を削除する
storage.removeItem('userid');

//ストレージに保存されているデータをすべてクリアする
storage.clear();

尚、上のサンプルではsessionStorageとしてデータを保存していますが、 「sessionStorage」の部分を「localStorage」に変えれば localStorageとしてデータが保存されます。

sessionStorageとlocalStorageにデータの追加・上書き・削除・全クリアなどの 何らかの更新をするとstorageというイベントが発生します。 storageイベントには、以下の属性が用意されています。

属性名返り値
key更新されたkey
oldValue更新されたkeyの古いvalue
newValue更新されたkeyの新しいvalue
urlkeyが更新された文書のURL
storageArea更新によって影響を受けたStorageオブジェクト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//変数storageにsessionStorageを格納
var storage = sessionStorage;

//データを保存する
function set() {
  var k = document.getElementById("k").value;
  var v = document.getElementById("v").value;
  storage.setItem(k, v);
  show_result();
}

//データをクリアする
function cle() {
  storage.clear();
  show_result();
}

//保存されているデータをリスト表示する
function show_result() {
  var result = "";
  //保存されているデータの数だけループ
  for(var i=0; i<storage.length; i++){
    //i番目のキーを取得
    var k = storage.key(i);
    //キーと値をコロン（：）区切りのテキストにする
    result += k + "：" + storage.getItem(k) + "<br>";
  }
  //上のループで作成されたテキストを表示する
  document.getElementById("show_result").innerHTML = result;
}
</script>
<title>Web Storage　サンプル</title>
</head>
<body>
<p>
キー：<input id="k" type="text">
値：<input id="v" type="text">
<input type="button" value="ストレージに保存" onClick="set()">
</p>
<p>
<div id="show_result"></div>
<input type="button" value="ストレージをクリア" onClick="cle()">
</p>
</body>
</html>

Web Storageには、以下のメソッド・属性が用意されています。

length …… 保存されているデータの数を返す

key(n) …… 保存されているn番目のkeyを返す

getItem(key) …… keyに対応するvalueを取得する

setItem(key, value) …… keyとvalueのペアでデータを保存する

removeItem(key) …… keyに対応するvalueを削除する

clear() …… データをすべてクリアする