Web Storage/Web Databaseとは、クライアントサイドにデータを永続化するための仕組みで、オフラインWebアプリケーションを作成する上で非常に重要なテクノロジーだ。Web Storageはキー/バリュー型の単純なストレージ、Web Databaseは本格的なリレーショナルデータベースでありSQLを用いてストレージ操作を行うことができる。

Web Storageで取り扱うことのできる、キー/バリュー型のストレージには、以下の2種類がある。

  • sessionStorage … ウィンドウごと(セッションごと)に異なるストレージとなる。ウィンドウが閉じられると、データも消失する
  • localStorage … オリジン(プロトコル + ドメイン + ポート)ごとに異なるストレージとなる。複数のウィンドウをまたいでストレージは共通。ウィンドウが閉じられてもデータは消失しない

これらのストレージにアクセスするには、「window.sessionStorage」もしくは単純に「sessionStorage」とすればよい。

両ストレージは、どちらも以下のプロパティ/メソッドを持つ。

  • length … ストレージに格納されている項目の数を返す
  • key(index) … 項目のインデックスを指定し、キーを取得する
  • getItem(key) … キーを指定して値を取得する。
  • setItem(key, data) … キーと値を指定して永続化する。キーと値はどちらも文字列に限られる。
  • removeItem(key) … キーを指定して値を削除する
  • clear() … ストレージをクリアする

また、getItem()やsetItem()は、ストレージに対するプロパティアクセスを行っても同様の処理を実現できる。 

// localStorage.setItem("key1", "value1")と同様
localStorage.key1 = "value1";

// localStorage.getItem("key1")と同様
var v = localStorage.key1

サンプル

以下のサンプルは、ローカルストレージに対して項目の追加と削除を行うことができる。

ローカルストレージのサンプル

サンプルのソースコードを以下に示す。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function load() {
  var list = document.getElementById("list");
  list.innerHTML = "";
  // ローカルストレージに格納されているすべての値を列挙
  for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    list.options[list.options.length] = new Option(localStorage[key], key);
  }
}
function remove() {
  var list = document.getElementById("list");
  if (list.selectedIndex < 0) {
    return;
  }
  var selected = list.options[list.selectedIndex].value;
  // 選択された項目を削除
  localStorage.removeItem(selected);
  load();
}
function add() {
  var key = document.getElementById("key").value;
  var value = document.getElementById("value").value;
  // ストレージに値を格納
  localStorage[key] = value;
  load();
}
</script>
</head>
<body onload="load()">
<h1>localStorageのサンプル</h1>
<select id="list" size="5" style="width: 100px"></select>
<button onclick="remove()">削除</button><br>
キー:<input type="text" id="key"><br>
値:<input type="text" id="value">
<button onclick="add()">追加</button><br>
</body>
</html>

localStorageを使用しているため、ブラウザを複数立ち上げてアクセスしても同じストレージ内のデータを読み書きできるし、ウィンドウを閉じて開き直してもデータは失われない。

このサンプルは、Firefox 3.5とSafari 4、そしてInternet Explorer 8での動作を確認した。ただし、Firefox 3.5でこのサンプルを試す場合は、何らかのWebサーバにアップロードしてアクセスしていただきたい(ローカルファイルを直接ブラウザで実行すると、リロードするたびにlocalStorageがクリアされてしまう)。