クッキーより便利になったブラウザ標準ストレージ - Web Storage

連載 :

2012年10月18日(木)

Web Storage（以降、ストレージ）とは、ブラウザ標準で用意されたデータストアの一種です。データを特定するための名前（キー）と値との組み合わせでデータを管理することから、Key-Value型データストアと呼ばれることもあります。あまりに複雑なデータ管理には不向きですが、ちょっとしたデータを管理するのに有効です^（＊）。

＊）例えばAmazonでは「この商品を買った人はこんな商品も買っています」という表示項目のページ番号管理に、ストレージを利用しています。

このようなデータストアとしては、従来、クッキー（Cookie）がありましたが、表1のような違いがあります。環境が許すのであれば、今後はストレージを優先して利用することをお勧めします。

表1：ストレージとクッキーの違い

項目	ストレージ	クッキー
データサイズ	大（5MB）	小（4KB）
有効期限	なし	あり
通信	発生しない	リクエスト都度、サーバにも送信

[第5回目次]

TIPS 034：ストレージにデータを保存する
TIPS 035：ストレージのデータを取得する
TIPS 036：ストレージのデータをツールから確認する
TIPS 037：ストレージからすべてのデータを取り出す
TIPS 038：ストレージ上のデータを削除する
TIPS 039：ストレージにオブジェクトを出し入れする
TIPS 040：ストレージの登録／更新／削除を監視する

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

ストレージは、大きくセッションストレージとローカルストレージに分類できます。両者の違いは有効範囲です。

セッションストレージ（Session Storage）は、ブラウザが起動している間だけ有効です。ブラウザを閉じたタイミングでデータは破棄されますし、異なるウィンドウ／タブ同士でもデータを共有することはできません。

一方、ローカルストレージ（Local Storage）は、オリジン単位でデータを管理します。ブラウザを閉じてもデータが消えることはありませんし、異なるウィンドウ／タブからも同じデータを共有することが可能です。

オリジンとは「http://www.wings.msn.to:8080/」のように、「プロトコル://ホスト:ポート番号」の組み合わせのことです。ストレージはオリジンの単位で独立していますので、現在のホストで保存したデータを異なるホストで読み込むということはできません。

アプリを利用している間だけ維持しておきたい情報はセッションストレージを、閉じたあとも維持したい情報はローカルストレージという使い分けになるでしょう。先ほどのAmazonの例であれば、その場限りの情報なのでセッションストレージを利用しています。

表2：WebStorageの対応バージョン

ブラウザ	対応バージョン
Internet Explorer	8以降
Firefox	3.6以降
Google Chrome	8以降
Safari	5以降
Opera	11以降

TIPS 034：ストレージにデータを保存する

さまざまな記法で、ストレージにデータを保存してみましょう。例えば以下は、現在時刻をローカルストレージに保存する例です。

［リスト01］ストレージに現在時刻を保存するコード（set.html）

01window.addEventListener('DOMContentLoaded',
02  function() {
03    // ストレージが利用できるかをチェック（1）
04    if (localStorage) {
05      // ローカルストレージを呼び出し（2）
06      var storage = localStorage;
07      var current = (new Date()).toLocaleString();
08      // ストレージに現在時刻をセット（3）
09      storage.setItem('lastAccessed', current);
10      storage.lastAccessed2 = current;
11      storage['lastAccessed3'] = current;
12    }
13  }
14);

ストレージは新しい機能なので、利用する前にまず、ブラウザが対応しているかをチェックしなければなりません。これを行っているのが（1）です。

localStorage（正確にはwindow.localStorage）は、ローカルストレージにアクセスするためのプロパティです。（1）ではlocalStorageプロパティにアクセスしてみて、アクセスできればストレージに対応していると判断し、以降の処理を行っているわけです（第1回、第2回にも登場した「機能テスト」です）。

ストレージを利用する際は、最初にlocalStorageプロパティの値（localStorageオブジェクト）を変数storageに格納しておくと良いでしょう（2）。これによって、あとから格納先のストレージが変更になった場合にも、コード全体に影響が及ばなくなります。

もしもセッションストレージを利用するならば、6行目を以下のように差し替えてください。以降のデータの出し入れは、ローカルストレージ／セッションストレージに関わらず、同じ要領で行えます。

var storage = sessionStorage;

ストレージにデータを保存しているのは、（3）の箇所です。3種類の記法について、それぞれ確認しておきましょう。

表3：ストレージにデータを保存する方法

記法	構文
setItemメソッド	storage.setItem(名前, 値)
プロパティ構文	storage.名前 = 値
ハッシュ構文	storage[名前] = 値

いずれの方法を利用しても構いませんが、同じアプリの中では同じ記法で統一するのが可読性という意味で望ましいでしょう。

名前は、原則としてJavaScriptの識別子のルールに沿うようにしてください。setItemメソッド、ハッシュ構文では自由な名前指定が可能ですが、名前によってはプロパティ構文でアクセスできないものが出てしまうためです。

また、ストレージは同じオリジンの中で共有されます。それは、アプリが大規模になれば、それだけ名前重複の危険が増えるということです。それを踏まえて、一般的な変数よりも具体的な名前を付けるよう意識してください。

TIPS 035：ストレージのデータを取得する

ストレージから保存済みのデータを取り出してみましょう。サンプルを実行するにあたっては、あらかじめ前のTIPSのサンプル（set.html）を実行しておいてください。

［リスト02］ストレージからキーlastAccessedのデータを取り出すコード（get.html）

01window.addEventListener('DOMContentLoaded',
02  function() {
03    // ストレージが利用できるかをチェック
04    if (localStorage) {
05      // ローカルストレージをセット
06      var storage = localStorage;
07      // ストレージからキーlastAccessedを取得
08      window.alert(storage.getItem('lastAccessed'));
09      window.alert(storage.lastAccessed2);
10      window.alert(storage['lastAccessed3']);
11    }
12  }
13);