前回は、Drag Drop API や File APIといったデスクトップ連携についてまとめた。ここでは、Web Storage と Indexed Database といったストレージ技術について解説する。
１ Web Storage
Web Storageとは
Web StorageはJavaScriptで扱うデータを手軽に永続化させるためのインタフェースである。サーバとの通信部分をうまく排除することで、パフォーマンスの向上、開発工数の削減、オフライン操作の実現など、様々な面でメリットを享受できる可能性がある。
Web Storageは以下の3つの特徴を持つ。 Key-Value型のシンプルなストレージ、通常のJavaScriptオブジェクトと同様の操作で読み書きが可能、（Cookieと比べ）大容量のデータを保存可能。
- Web Storageの容量：ほとんどのブラウザでは5MB程度を上限として実装
- localStorageとsessionStorage：Web Storageの実体。2つの違いはデータの生存期間。前者は半永久的、後者は同一セッション内
基本操作
- データの読み書き：localStorageにデータを保存するにはsetItemメソッド、データを参照するにはgetItemメソッドを呼び出す。存在しないキーを指定して参照した場合にはnullを返す。読み書きできるデータは文字列のみ
- データの削除：保存された値を削除するにはremoveItemメソッドを呼び出す
- データの列挙：保存されたデータを列挙するにはkeyメソッドとlengthプロパティを利用する。keyは引数に指定したインデックスでキーを参照するためのメソッドで、lengthは保存されているキーの総数を参照するプロパティ
storageイベント
あるウィンドウからWeb Storageのデータが変更されると、変更元のウィンドウを除いたすべてのウィンドウでstorageイベントが発火する。このstorageイベントを捕捉して適切に処理することで、複数同時に開いたウィンドウ間での整合性を保つことができる。
Cookieについて
Web Storageに対応していないブラウザではCookieを利用してデータを永続化することができる。ただしCookieには以下のような特徴があり、実際にWeb Storageの代替として利用されるケースは少ない。
- 容量制限が4KBと非常に小さいので大きなデータは格納できない
- サーバへリクエストするたびにCookieが一緒に送信されてしまう
- セッション情報などの重要な情報が格納されている場合が多い
ネームスペースの管理
localStorageのデータは明示的に削除しない限りリセットされないため、ローカル変数のような間隔でむやみにプロパティを追加しすぎると、後々の管理が非常に困難になる。もしsessionStorageで足りる要件であれば、sessionStorageを使った方が削除時の管理の手間が省ける。
バージョンの管理
スキーマを変更したい場合はバージョン管理を検討する。
localStorageのエミュレート
未対応ブラウザのグローバルスコープにlocalStorageオブジェクトを生成し、localStorageの各メソッドの挙動をエミュレートする方法がある。この方法であれば、既存のプログラムに変更を加えることなく未対応ブラウザの対応ができるため、条件判定文によりプログラムをムダに複雑化することがなくなる。
２ indexed Database
Indexed Databaseとは
Indexed Databaseはブラウザ上でJavaScriptを使って操作する高機能なデータベースである。Indexed Databaseは、クライアントサイドでより大規模で複雑なデータの管理を実現するためのテクノロジーとして仕様策定が進められている。
インフラストラクチャ
Indexed DatabaseはWeb Storageと同様、同一オリジンで実行されるプログラムからのみ共有される領域を持つ。1つのオリジンが持つ領域には複数のデータベースを作成でき、1つのデータベースの中には複数のオブジェクトストアを作成できる。
オブジェクトストアはデータを格納するための入れ物で、オブジェクトストアの中には任意のJavaScriptオブジェクトを格納できる。また、格納されるJavaScriptオブジェクトの任意のプロパティに対してインデックスを作成できる。
データベースに接続
データベース（IDBDatabaseインスタンス）に接続するには、indexedDBオブジェクトのopenメソッドを呼び出す。接続は非同期で実行されるので、openの返り値であるリクエストオブジェクト（IDBRequest）に対してsuccessイベントとerrorイベントを監視する。接続が成功するとonsuccessイベントハンドラが実行され、データベースが参照可能となる。
オブジェクトストアの作成
オブジェクトストアを作成するにはcreateObjectStoreメソッドを呼び出す。データベースのバージョン変更のトランザクションの中でのみ実行可能。setVersionメソッドを呼び出すと内部で自動的にトランザクションが開始される。
データの追加・削除・参照
キーを使ってデータを追加、削除、参照するには、それぞれオブジェクトストアのadd（put）、delete、getメソッドを呼び出す。どのメソッドも非同期で実行され返り値がリクエストオブジェクトとなっているので、このオブジェクトに対してsuccessイベントやerrorイベントの監視をする。
インデックスの作成
インデックスを作成するにはcreateIndexメソッドを呼び出す。インデックスは任意のプロパティに対して作成できる。複数のプロパティに対してインデックスを作成したい場合は、プロパティの数だけインデックスを作成する。
データの検索と更新
インデックスを利用するとインデックスを作成したプロパティに対して高速な範囲指定検索が可能となる。範囲を指定するにはIDBKeyRangeを利用する。また、オブジェクトストアのindexメソッドで既存のインデックスを参照できる。インデックス経由でデータを検索するにはopenCursorメソッドを利用する。データの検索が成功するとsuccessイベントが発火する。
データのソート
インデックス経由で検索する際、検索順序を指定してデータを取得できる。
トランザクション
データベースのバージョン変更などの一部の処理では内部で自動的にトランザクションが生成される。トランザクションが発生したメソッドが終了するか、新しいトランザクションが介されると、トランザクションは自動的にコミットされる。またトランザクションのコミット前にエラーが発生すると、自動的にロールバックが実行される。プログラムから明示的にロールバックを実行するには、トランザクションのabortメソッドを呼び出す。
同期API
Indexed Databaseにはデータベースの各種操作を同期的に処理するためのAPI仕様が策定されている。これらのAPIはWeb Workersの環境下でのみ利用できる。
最後に
ブラウザから利用可能なストレージ（記憶装置）技術が、Web StorageとIndexed Databaseである。これらの技術の登場によって、従来は完全にサーバサイドの役割であった永続化データの管理がクライアントサイドでも実現可能となり、状況に応じて適切な実装方法の選択ができるようになった。
次回は、効率的な双方向通信が実現できる技術 WebSocketについて解説する。
 |
