16章 ストレージ
Web Store
p376 Web Storeとは
- WebStorageの容量は、書籍の時点では5MB程度
- p377 オリジンごとに共有され、読み書きができる
- localStorageオブジェクトとsessionStorageオブジェクトにプロパティの読み書きをすればよい
- localStorageは、明示的に削除しない限り維持
- sessionStorageは、同一セッションないでのみ維持。新規ウィンドウや新規タブで開いたページや、ウィンドウを閉じて新しく開いたページでは共有されない
基本操作
- p378 データの書き込み
- localStorege.setItem(キー,データ);
- localStorage.キー = データ;
- localStorage['キー'] = データ;
- データの読み込み
- localStorage.getItem(キー,データ);
- 残りも同様
- sessionStorageオブジェクトに変えればそちらへ
- 存在しないキーを読み出すとnull。ブラウザによってundefinedのこともあるので注意
- データは文字列のみ
- p379 データを削除するにはremoveItemメソッドを利用。メンバアクセスの場合はdelete
- 一括で消す場合はclear()
- データの列挙
- localStorage.lengthで、データの個数が得られる
- localStorage.key(i)でプロパティ名を取り出し、localStorage[キー]で読み出せる
- キーの順序は不定
- for inでキーの列挙も可能。prototypeも列挙するので、hasOwnPropertyでチェックをしたほうがよい
storageイベント
- p380 WebStorageに変更があると、変更したウィンドウ以外のウィンドウのstorageイベントが発火する
Cookieについて
ネームスペースの管理
- p381 localStorageは同一オリジン間で共有され、明示的に削除しないと消えないこともあり、キーの衝突の注意が必要
- 問題がなければ、sessionStorageの方の利用を検討する
- 利用の場合は、記録するプロパティ名はサービス名として、そこにJSON文字列を記録するなどがよい
- window.onbeforeunloadにページを閉じる時の処理をかける
- p382 localStorageはアクセスが遅いため、逐次アクセスするとパフォーマンスが落ちるので、起動時と終了時にアクセスするとよい。ただし、データの整合性をウィンドウ間でとる必要がある場合は、必要に応じて保存して、イベントを処理する
バージョンの管理
- localStorageはクライアントサイドに保存されているので、記録方式を気軽に変更すると正しく動作しないことがある
- バージョン情報を記録しておき、バージョンに合わせてアクセス方法を変更するロジックを実装する
localStorageのエミュレート
- p383 書籍時点で、IE7以前以外の多くのブラウザに実装
- localStorageのエミュレートルーチン
Indexed Database
Indexed Databaseとは
インフラストラクチャ
- 同一オリジンで共有
- p385 1つのオリジンが持つ領域に複数のデータベースを作成できる
- 1つのデータベースに複数のオブジェクトストアを作成できる
- オブジェクトストアはデータを格納するための入れ物で、任意のJavaScriptオブジェクトが格納できる
- オブジェクトストアでは、格納されるJavaScriptオブジェクトの任意のプロパティに対してインデックスを作成できる
- インデックスは複数作成可能
データベースに接続
- indexedDBオブジェクトのopenを呼び出す
- 非同期なので、successイベントとerrorイベントを監視する
- 書籍の時点ではindexedDBのベンダープレフィックスがついている
