sessionStorage と Pinia の違いまとめ

🌟 結論

sessionStorage は Pinia のようにリアクティブでグローバルにデータを取り出す仕組み ではありません。

項目	sessionStorage	Pinia (Vue の状態管理ライブラリ)
保管場所	ブラウザのストレージ（セッション単位で永続）	メモリ上のリアクティブなストア
データ取得方法	毎回 `sessionStorage.getItem()` で取り出す必要がある	コンポーネントから直接リアクティブにアクセス可能
リアクティブ性	なし（変更を監視したり反応したりできない）	リアクティブ。値が変わればUIが自動で更新される
スコープ	全ページ（同じウィンドウ・タブ内で共有）	Vue アプリ全体で共有（インスタンス内）
データの持続性	ページをリロード・遷移しても残る（タブを閉じるまで）	リロードで消える（永続化オプションで対応可）

const data = JSON.parse(sessionStorage.getItem('recordingData') || '{}')

const store = useCounterStore()
console.log(store.someValue)  // 自動的にUIに反映される

✅ sessionStorage はグローバルにデータを保持できるが、Pinia のようにリアクティブに管理するものではない。
✅ データ取得には毎回 getItem が必要。
✅ Vue のUI自動反映には Pinia やリアクティブストアを使うのが最適。