# Cookie localStorage sessionStorage の違い
| 項目 | Cookie | Local Storage | Session Storage |
|---|---|---|---|
| 保存場所 | ブラウザ | ブラウザ | ブラウザ |
| データの型 | 文字列のみ | 文字列のみ | 文字列のみ |
| 有効期限 | 任意に設定 | 消さない限り半永久的 | セッションやタブを閉じるまで |
| 保存容量 | 4KB | 5MB ～ 10MB | 5MB ～ 10MB |
| サーバにデータ送信 | 自動送信する | しない | しない |
| 操作言語 | バックエンド＆フロントエンド | フロントエンド | フロントエンド |
Cookie はくらいクライアント側の汎用記憶領域として使用されていますが、ES6 以降にクライアントストレージ向けの新しい Web Storage API として、localStorage sessionStorage があります。
# Cookie
Cookie は、サーバーがユーザーのウェブブラウザに送信する小さなデータであり、ブラウザに保存され、その後のリクエストと共に同じサーバーへ返送されます。一般的には、 2 つのリクエストが同じブラウザから送信されたものであるかを知るために使用されます。例えば、ユーザーのログイン状態を維持することができます。
Cookie の用途
- ログイン状態などを維持
- ユーザー設定やサイトの設定を保存
- ユーザーの行動トラッキング記録
# Cookie の有効期限
セッション Cookie はページ閉じられてセッション終了した時、または指定された期間が経過した後に削除されます。
Expires Max-Age 属性で Cookie の有効期限を設定します。
# Cookie サイズ上限
ブラウザによって Cookie 上限サイズが違いますが、Google Chrome 含めて多くのブラウザの Cookie は 4096byte （4k） まで保存可能です。
Cookie を作成していて Cookie が 4096 バイト未満の場合、RFC に準拠するすべてのブラウザとユーザエージェントでサポートされます。
# Cookie を有効にする
セッション ID やトークンを保存するために Cookie 使うことが一般的ですが、Cookie が無効になっているというメッセージが表示された場合、Cookie を有効にする必要があります。
ログイン画面からログインして一瞬でログアウトされる場合、Cookie が有効になっていない可能性があります。
# localStorage
localStorage はブラウザを閉じてもデータは維持され、有効期限がなく消さない限りずーとブラウザに記憶され、オリジンごと保管領域管理されます。
# 使い方
// 値セット
localStorage.setItem("key", "value");
// 値取得
let val = localStorage.getItem("value");
// 値削除
localStorage.removeItem("key");
// すべてのデータをクリア
localStorage.clear();
# sessionStorage
sessionStorage は localStorage とよく似ていますが、違いは有効期限にあります。
sessionStorage はページの再読み込みや復元を含むブラウザーを開いている間に使用可能でオリジンごと保管領域管理されます。
# 使い方
// 値セット
sessionStorage.setItem("key", "value");
// 値取得
let data = sessionStorage.getItem("key");
// 値削除
sessionStorage.removeItem("key");
// すべてのデータをクリア
sessionStorage.clear();