こんこん!狐🦊の開発記録!!

🔔 このサイトは、こんこん!狐🦊の開発記録をまとめたものです。主にWEBクライアント技術を用いたプログラムの開発において、学んだことを共有していきます!

はじめに 開発環境について WEBクライアント技術でのデータの保存先

✒️ 第01回WEBクライアント技術でのデータの保存先

現在、Webクライアントで使える主なデータ保存技術としては、おおむね下記のようなものが存在します。 それぞれに、特徴、容量、主な用途の違いが存在します。

名前 特徴 容量の目安 主な用途
LocalStorage キー・バリュー形式(文字列のみ)、同期API、永続保存 約5〜10MB(ブラウザ依存) ユーザー設定、テーマ、簡単なキャッシュ
SessionStorage LocalStorageと同様だが、タブを閉じると消える 約5〜10MB(ブラウザ依存) 一時的な入力データ、セッション中の状態管理
Cookies サーバーと自動送受信、サイズ制限あり 約4KB/個、合計20〜50個程度 認証情報、トラッキング、セッションID
IndexedDB 構造化データの保存、非同期API、インデックス検索可能 数十〜数百MB(ブラウザ依存) キャッシュ、履歴、オフラインデータ、構造化DB
OPFS(Origin Private File System) ファイル・ディレクトリ構造、バイナリ対応、WASMと高相性 数百MB〜GB級(ブラウザ依存) SQLite、画像/音声/動画保存、仮想ファイルシステム
Cache Storage API サービスワーカーと連携、HTTPレスポンスをキャッシュ 数十〜数百MB(ブラウザ依存) PWAのオフライン対応、静的リソースのキャッシュ
File System Access API ユーザーのローカルファイルに直接アクセス(要許可) ユーザーのローカルストレージに依存 テキスト/画像エディタ、ファイルの読み書きアプリ
WebSQL(非推奨) SQLベースのDB、SQLite依存、非推奨 数MB〜(ブラウザ依存) 古いアプリの互換性維持用(新規開発非推奨)

当初は、cookie程度のデータ保存機能しかなかったのですが、IndexedDB、OPFS、WebSQLなどの登場により、WEBクライアントでデスクトップアプリケーションのようなプログラムを構築できる環境が急速に整って来ています。

特にOPFS(Origin Private File System)に関しては、ブラウザのキャッシュ領域に存在するファイルシステムに近いものがあり、ファイルとしての扱いに加え、sqlite3のwasmと組み合わせることにより、SQLデータベースの使用を可能としております。

設計方法によっては、オブジェクトデータベースに近いIndexedDBがあれば、大抵のものは作成できるとは思いますが、業務系のアプリケーションを念頭においた場合、構造化されていないファイルの保存や、SQLデータベースを扱うことができるというインパクトは、計り知れないものがあります。

余談ですが、本来、その役割は当初、WebSQLの標準化が担う予定でしたが、残念ながら、仕様策定が止まってしまい、今は互換性維持の為だけに存在しています。

一見、File System Access APIがあれば、通常のファイルアクセスができる為、OPFS(Origin Private File System)は必要ないのではとうつるかもしれません。しかし、この機能の使用には必ずファイルダイアログを介したユーザー許可が必須とされている為、入出力時の許可といった使用制限があります。 また、現状、chromiumをベースとしたブラウザでしかサポートされていないことから、クロスプラットフォームの戦略には考慮が必要です。