HTML5レベル2 勉強メモ: ストレージ
Web Storage
ブラウザに「キーと値の組み合わせ」でデータを保持する仕組み。
Web Storageに保存できるデータは「文字列のみ」
画像データを保存するなら Data URIスキームなどに変換する
一般的なブラウザでは5MB以上のデータを保存できる
クッキーに比べれば大容量のデータを保存できる
Web Storageの種類
データの保存期間が違う。
localStorage
ブラウザが閉じられてもデータを保持する
ウィンドウやタブ間でデータを共有できる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の特徴:
RDBのようにインデックスによる検索やトランザクションに取る安全な操作が出来る
SQLではなくJavaScriptで操作する
格納できる値の種類は、
文字列
ファイル
blob(画像データ)格納処理は非同期で実行される
ブラウザが閉じられても、明示的にデータを破棄しない限り、永続的にデータを保持する
例えば以下のようなwebアプリケーションを新規に作成するときに、
以下の要件の技術が必要なら、Indexed Database APIを使う
大容量のデータを保存する
データを永続保存する
ファイルやblobを保存する
パフォーマンスが求められる
Web SQLは使用策定が中止されているため新規作成時には向いてない
File API
バイナリデータ
この記事が気に入ったらサポートをしてみませんか?