sessionStorage と Pinia の違いまとめ
🌟 結論
sessionStorage は Pinia のようにリアクティブでグローバルにデータを取り出す仕組み ではありません。
比較表
| 項目 | sessionStorage | Pinia (Vue の状態管理ライブラリ) |
|---|---|---|
| 保管場所 | ブラウザのストレージ（セッション単位で永続） | メモリ上のリアクティブなストア |
| データ取得方法 | 毎回 sessionStorage.getItem() で取り出す必要がある |
コンポーネントから直接リアクティブにアクセス可能 |
| リアクティブ性 | なし（変更を監視したり反応したりできない） | リアクティブ。値が変わればUIが自動で更新される |
| スコープ | 全ページ（同じウィンドウ・タブ内で共有） | Vue アプリ全体で共有（インスタンス内） |
| データの持続性 | ページをリロード・遷移しても残る（タブを閉じるまで） | リロードで消える（永続化オプションで対応可） |
📌 sessionStorage の特性
- 文字列しか保存できない（オブジェクトは JSON 化する必要あり）。
- リアクティブではないので、更新しても自動的に画面の表示が変わらない。
- 必要なときに都度取り出して
JSON.parseして使う。
const data = JSON.parse(sessionStorage.getItem('recordingData') || '{}')
📌 Pinia の特性
- グローバルな状態管理が可能。
- リアクティブな値を直接監視・利用できる。
- Vue のコンポーネントと密接に連携。
const store = useCounterStore()
console.log(store.someValue) // 自動的にUIに反映される
💡 まとめ
✅ sessionStorage はグローバルにデータを保持できるが、Pinia のようにリアクティブに管理するものではない。
✅ データ取得には毎回 getItem が必要。
✅ Vue のUI自動反映には Pinia やリアクティブストアを使うのが最適。