ローカルストレージは認知していたのですが、使ったことがない。また、セッションストレージの存在をいまさら知り、それぞれの特徴について学んだのでメモしておきます。
Web Storage API
ローカルストレージ / セッションストレージとも、Web Storage APIの仕組みとして括られています。
ローカルストレージ / セッションストレージの違い
ざっくりまとめると以下となります。
| 特徴 | ローカルストレージ | セッションストレージ |
|---|---|---|
| 生存期間 | 永続（明示的に消すまで有効） | タブが削除されるまで |
| 有効範囲 | ブラウザ全体 | タブごと |
詳しくは以下をご参照ください。
利用用途
特徴はわかったけど、それぞれどんな使い道があるんですかね... 🤔
自分がパッと思い浮かんだのは以下です。
- ローカルストレージの場合
- 複数タブにわたって情報を引き継ぎたい機能
- ドキュメント編集（Google Docsとか 実際にはわからない）
- プレーンテキストではない、スタイル情報を含めたテキストやオブジェクトのコピー
- 複数タブにわたって情報を引き継ぎたい機能
- セッションストレージ
- SPAなサイトでの情報引き継ぎ（具体例あんま思い浮かばない...）
他、何か使い道があれば、ご教示いただけると助かります。🙏
ローカルストレージのアンチパターン
以下の記事で、ローカルストレージは使わないでね的なことが書いてありました。
咀嚼すると、
- ローカルストレージは簡単にアクセスできてしまうセキュアではない情報だよ
- とくに 個人情報 / 認証情報（JWT ジョット とか） 等は保存しちゃだめだよ！
- （セッションストレージも同じく、アクセスできちゃうから注意必要だよ）
じゃあどうすればいいの？の答えは、
- 認証情報はサーバーサイドセッション使おうよ
- 純粋な文字列や数値だったら、
IndexedDBを使おうよ - オフライン（PWA）でデータを扱うなら
Cache API使おうよ
と書いてあります。
新規開発や小規模なアプリケーションでは、これらを考慮した作りに切り替えることが容易だと思います。
しかし、絶賛稼働中かつ中規模以上のアプリケーションでは、影響範囲調査や改修コストと戦うことになると予想できます。そんな状況下、優先的に対応するとしたら、ローカルストレージから個人情報を排除する（個人情報の代わりにIDを保持、APIアクセスして取得するようにする など）かなと思いました。
おわり
以上です。
気になる点などありましたら、FBいただけると助かります。🙏
