SPAやPWAを開発する時に、サーバーサイドを構築するのではなく、クライアント側にデータを保存したいこともあると思います。
この記事では、ブラウザにデータを保存可能な方法とそれぞれの違いを紹介します。
0. まとめ
まとめると以下のようになります。
| 種別 | 保存期間 | 容量 | データ種別 | 条件抽出API | ソートAPI |
|---|---|---|---|---|---|
| Local Storage | 永続的 | 5MBから10MB | 文字列のみ | なし | なし |
| Session Storage | 一時的 | 5MBから10MB | 文字列のみ | なし | なし |
| Indexed Database | 永続的 | 5MB以上 | JavaScriptで扱える全てのデータ種別 | whereメソッド(dexie.js) | sortByメソッド(dexie.js) |
1. 種類
データを保存するAPIとして以下のようなものがあります。
- Local Storage
- Session Storage
- Indexed Database
2. データの保存期間
- Local Storage
- 永続的（ブラウザやタブを閉じても残ります）
- Session Storage
- セッション（ブラウザやタブを閉じると消えます）
- IndexedDB
- 永続的（ブラウザやタブを閉じても残ります）
3. 保存可能な容量
- Local Storage
- 5MB ~ 10MB
- Session Storage
- 5MB ~ 10MB
- Indexed Database
- 5MBだが、ユーザーが拡張を承認するとディスク空き容量の全体の50%まで使用可能
4. 格納可能なデータ種別
- Local Storage
- 文字列のみ
- Session Storage
- 文字列のみ
- Indexed Database
- 全てのJavaScriptデータタイプを格納可能
5. 条件抽出など
- LocalStorage
- キー・バリューペアでの管理のため、不可
- Session Storage
- キー・バリューペアでの管理のため、不可
- Indexed Database
- Dexie.js の Whereメソッドで条件抽出が可能
6. ソート・並び替え
- LocalStorage
- キー・バリューペアでの管理のため、不可
- Session Storage
- キー・バリューペアでの管のため、不可
- Indexed Database
- Dexie.js の sortBy、reverseメソッドでソートが可能
7. LocalStorageの基本的な使い方
LocalStorage はJavaScriptで以下のように書きます。
書き込み
window.localStorage.setItem(key, value);
抽出
var value = window.localStorage.getItem(key);
削除
localStorage.removeItem(key);
8. IndexedDBはdexie.jsを使うと簡単！
Indexed DB はラッパークラスである dexie.js を使うと簡単に実装できます。
dexie.js で簡単に Indexed DBを実装する方法
Indexed DBとは、クライアントサイド（ブラウザ側）に構築されているデータストアで、キーで紐づけられたデータを扱うことができます。Local Storageに比べて、大容量のデータを扱うことができます。この記事では、Indexed D...
usefuledge.com
2022.03.26
コメント