読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

パーフェクトJavaScript勉強メモ(16)

前へ | 次へ

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について
  • WebStorageが使えない場合などに利用
  • Cookieの制約
    • 容量は4kbyteまで
    • サーバへリクエストするたびにCookieが一緒に送信
    • セッション情報などの重要情報が格納
  • 使い方は、document.cookieを使う(補足:jquery.cookie.jsを利用すると楽)
ネームスペースの管理
  • p381 localStorageは同一オリジン間で共有され、明示的に削除しないと消えないこともあり、キーの衝突の注意が必要
  • 問題がなければ、sessionStorageの方の利用を検討する
  • 利用の場合は、記録するプロパティ名はサービス名として、そこにJSON文字列を記録するなどがよい
  • window.onbeforeunloadにページを閉じる時の処理をかける
  • p382 localStorageはアクセスが遅いため、逐次アクセスするとパフォーマンスが落ちるので、起動時と終了時にアクセスするとよい。ただし、データの整合性をウィンドウ間でとる必要がある場合は、必要に応じて保存して、イベントを処理する
バージョンの管理
  • localStorageはクライアントサイドに保存されているので、記録方式を気軽に変更すると正しく動作しないことがある
  • バージョン情報を記録しておき、バージョンに合わせてアクセス方法を変更するロジックを実装する
localStorageのエミュレート
  • p383 書籍時点で、IE7以前以外の多くのブラウザに実装
  • localStorageのエミュレートルーチン

Indexed Database

Indexed Databaseとは
  • p384 クライアントサイドで大規模なデータ管理をするための仕様
  • 補足:2015/2/12現在、IESafariで一部未対応があるが、おおよその機能は利用できる
  • 似たようなものいWeb SQL Databaseがある。IEFirefox、Operaminiは未実装
インフラストラクチャ
  • 同一オリジンで共有
  • p385 1つのオリジンが持つ領域に複数のデータベースを作成できる
  • 1つのデータベースに複数のオブジェクトストアを作成できる
  • オブジェクトストアはデータを格納するための入れ物で、任意のJavaScriptオブジェクトが格納できる
  • オブジェクトストアでは、格納されるJavaScriptオブジェクトの任意のプロパティに対してインデックスを作成できる
  • インデックスは複数作成可能
データベースに接続
  • indexedDBオブジェクトのopenを呼び出す
  • 非同期なので、successイベントとerrorイベントを監視する
  • 書籍の時点ではindexedDBのベンダープレフィックスがついている
オブジェクトストアの作成
  • p386 createObjectStoreメソッドを呼び出す
  • バージョン変更のトランザクションないでのみ可能なので、setVersionでバージョン設定を行い、成功したイベントの中で処理する
データの追加・削除・参照
  • p387 キーを使って、add(put)、delete、getメソッドを利用
  • 非同期に実行されるので、successとerrorイベントを監視
インデックスの作成
  • p389 createIndexメソッドを呼び出すことで、任意のプロパティに対して作成できる
  • 複数のプロパティへも設定可能
  • この処理もバージョン変更のトランザクションの中でのみ有効
データの検索と更新
p390 データのソート
p392 同期API

前へ | 次へ