ブラウザにデータを保存する方法

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...

コメント

タイトルとURLをコピーしました