\

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

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で以下のように書きます。

書き込み

1
window.localStorage.setItem(key, value);

抽出

1
var value = window.localStorage.getItem(key);

削除

localStorage.removeItem(key);

8. IndexedDBはdexie.jsを使うと簡単!

Indexed DB はラッパークラスである dexie.js を使うと簡単に実装できます。

https://usefuledge.com/howtousedexiejs.html

コメントシステムを導入しました!コメント頂けると嬉しすぎて、光の速さで返信します(●´ω`●)

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱