Cookieはサーバーとのやり取りに向いた保存場所。LocalStorageはブラウザ内の設定保存に向いた保存場所です。
ログイン情報のように盗まれると困るものは、LocalStorageへ気軽に入れないのが基本です。
CookieとLocalStorageの違い
CookieもLocalStorageも、ブラウザにデータを保存する仕組みです。ただし、向いている用途が違います。
Cookieは同じサイトへのリクエスト時に自動で送られます。LocalStorageはブラウザ内に保存され、JavaScriptから読み書きできます。この違いが、安全な使い分けの入口です。
サーバーへ自動で送れるため、ログイン状態の確認に使われやすい。
ブラウザ内で読み書きしやすく、画面設定などに向いている。
LocalStorageの値はJavaScriptから読めるため、XSS時に狙われやすい。
ログイン情報は慎重に扱う
アクセストークンやセッションIDのようなログイン情報は、盗まれると本人になりすまされる可能性があります。そのため、単に「保存しやすいから」という理由でLocalStorageに入れるのは危険です。
ログイン状態を扱うなら、サーバー側のセッションと、HttpOnly や Secure を付けたCookieの組み合わせがよく使われます。HttpOnlyを付けると、JavaScriptからCookieを読み取りにくくできます。
LocalStorageに向いているもの
LocalStorageは悪い仕組みではありません。ユーザーが選んだテーマ、サイドバーの開閉状態、入力途中の下書きなど、盗まれても大きな被害になりにくい設定保存には便利です。
反対に、パスワード、秘密鍵、長く使えるログイントークンなどは避けます。迷ったら「この値を見られたら、他人が本人として操作できるか」を考えると判断しやすくなります。
テーマ色、表示件数、チュートリアルを見たかどうか。
パスワード、秘密情報、長く使えるログイントークン。
盗まれた時に、ログインや操作につながるかを確認する。
ここまでのまとめ
CookieとLocalStorageは、どちらもブラウザ保存ですが役割が違います。Cookieはサーバーとのやり取り、LocalStorageは画面設定や一時保存、と分けて考えると安全に使いやすくなります。
ログイン情報はLocalStorageへ気軽に入れず、サーバー側の確認と安全なCookie設定を組み合わせて扱います。