Web StorageとIndexedDBについて整理する

こんにちは、Yu_riです。
今回はTodoアプリの作成にIndexedDBを使用しました。
その際IndexedDBがWeb Storage（LocalStorageとSessionStorage）とどう違うのかが気になったため整理してみます。

LocalStorage

● 処理の実行方法

同期処理

● 通信発生有無

発生しない

● 保存できるデータの種類

文字列のみ

● 保存容量

約5MB
（オリジンごとにストレージが用意されているためタブ間でのデータ共有は可能）

● 保存期間

半永久的（ブラウザを閉じてもデータは残る）
※ユーザがサイトに最後にアクセスしてから7日後に削除される

● 用途

永続的なデータの保存
例：ダークモード/ライトモードの設定を保存する時

SessionStorage

● 処理の実行方法

同期処理

● 通信発生有無

発生しない

● 保存できるデータの種類

文字列のみ

● 保存容量

約5MB
（セッションごとにストレージが用意されているためタブ間でのデータ共有は不可）

● 保存期間

あり（タブを閉じるとデータが消えてしまう）
※ページリロード時はデータは消えず保持される

● 用途

一時的なデータの保存
例：ページが遷移してもデータを引き継ぐ時

IndexedDB

● 処理の実行方法

非同期処理

● 通信発生有無

発生しない

● 保存できるデータの種類

オブジェクトやバイナリデータなど複雑なデータ型を保存可能

● 保存容量

数百MBから数GB
（ディスク容量とブラウザの算出方法によって異なる）

● 保存期間

半永久的（ブラウザを閉じてもデータは残る）

● 用途

Webアプリケーションのオフライン対応や大量データをローカルにキャッシュする時