HTML5 の Local Storage / Session Storage についての考えメモ

ローカルストレージは認知していたのですが、使ったことがない。また、セッションストレージの存在をいまさら知り、それぞれの特徴について学んだのでメモしておきます。

Web Storage API

developer.mozilla.org

ローカルストレージ / セッションストレージとも、Web Storage APIの仕組みとして括られています。

ローカルストレージ / セッションストレージの違い

ざっくりまとめると以下となります。

特徴	ローカルストレージ	セッションストレージ
生存期間	永続（明示的に消すまで有効）	タブが削除されるまで
有効範囲	ブラウザ全体	タブごと

詳しくは以下をご参照ください。

• Window.localStorage - Web API | MDN
• Window.sessionStorage - Web API | MDN

利用用途

特徴はわかったけど、それぞれどんな使い道があるんですかね... 🤔
自分がパッと思い浮かんだのは以下です。

• ローカルストレージの場合
  • 複数タブにわたって情報を引き継ぎたい機能
    • ドキュメント編集（Google Docsとか 実際にはわからない）
    • プレーンテキストではない、スタイル情報を含めたテキストやオブジェクトのコピー
• セッションストレージ
  • SPAなサイトでの情報引き継ぎ（具体例あんま思い浮かばない...）

他、何か使い道があれば、ご教示いただけると助かります。🙏

ローカルストレージのアンチパターン

以下の記事で、ローカルストレージは使わないでね的なことが書いてありました。

techracho.bpsinc.jp

咀嚼すると、

• ローカルストレージは簡単にアクセスできてしまうセキュアではない情報だよ
  • とくに 個人情報 / 認証情報（JWT ジョット とか） 等は保存しちゃだめだよ！
  • （セッションストレージも同じく、アクセスできちゃうから注意必要だよ）

じゃあどうすればいいの？の答えは、

• 認証情報はサーバーサイドセッション使おうよ
• 純粋な文字列や数値だったら、IndexedDBを使おうよ
  • IndexedDB API - Web API | MDN
• オフライン（PWA）でデータを扱うならCache API使おうよ
  • Cache - Web API | MDN

と書いてあります。

新規開発や小規模なアプリケーションでは、これらを考慮した作りに切り替えることが容易だと思います。

しかし、絶賛稼働中かつ中規模以上のアプリケーションでは、影響範囲調査や改修コストと戦うことになると予想できます。そんな状況下、優先的に対応するとしたら、ローカルストレージから個人情報を排除する（個人情報の代わりにIDを保持、APIアクセスして取得するようにする など）かなと思いました。

おわり

以上です。

気になる点などありましたら、FBいただけると助かります。🙏