HTML5レベル2 勉強メモ: ストレージ

Web Storage

ブラウザに「キーと値の組み合わせ」でデータを保持する仕組み。

Web Storageに保存できるデータは「文字列のみ」

画像データを保存するなら Data URIスキームなどに変換する


一般的なブラウザでは5MB以上のデータを保存できる
　クッキーに比べれば大容量のデータを保存できる

Web Storageの種類

データの保存期間が違う。

1. localStorage
   ブラウザが閉じられてもデータを保持する
   ウィンドウやタブ間でデータを共有できる

2. sessionStorage
   ブラウザが閉じられると同時にデータが消失する
   新しいウィンドウやタブを開くと新しいセッションが開始する

Web Storageのプロパティとメソッド

// プロパティの使用例
console.log(localStorage.length); // ストレージにあるキーの数を取得

// メソッドの使用例
localStorage.setItem('key', 'value'); // ストレージにキーと値を設定
console.log(localStorage.getItem('key')); // ストレージからキーに対応する値を取得
localStorage.removeItem('key'); // ストレージからキーとその値を削除
localStorage.clear(); // ストレージからすべてのキーとその値を削除

Indexed Database API

構造化されたデータを保存する仕組み

Indexed Database APIの特徴:

1. RDBのようにインデックスによる検索やトランザクションに取る安全な操作が出来る

2. SQLではなくJavaScriptで操作する

3. 格納できる値の種類は、
   文字列
   ファイル
   blob(画像データ)

4. 格納処理は非同期で実行される

5. ブラウザが閉じられても、明示的にデータを破棄しない限り、永続的にデータを保持する

例えば以下のようなwebアプリケーションを新規に作成するときに、
以下の要件の技術が必要なら、Indexed Database APIを使う

1. 大容量のデータを保存する

2. データを永続保存する

3. ファイルやblobを保存する

4. パフォーマンスが求められる

Web SQLは使用策定が中止されているため新規作成時には向いてない

File API

バイナリデータ