# Cookie localStorage sessionStorage の違い

項目 Cookie Local Storage Session Storage
保存場所 ブラウザ ブラウザ ブラウザ
データの型 文字列のみ 文字列のみ 文字列のみ
有効期限 任意に設定 消さない限り半永久的 セッションやタブを閉じるまで
保存容量 4KB 5MB ~ 10MB 5MB ~ 10MB
サーバにデータ送信 自動送信する しない しない
操作言語 バックエンド&フロントエンド フロントエンド フロントエンド

Cookie はくらいクライアント側の汎用記憶領域として使用されていますが、ES6 以降にクライアントストレージ向けの新しい Web Storage API として、localStorage sessionStorage があります。

Cookie は、サーバーがユーザーのウェブブラウザに送信する小さなデータであり、ブラウザに保存され、その後のリクエストと共に同じサーバーへ返送されます。一般的には、 2 つのリクエストが同じブラウザから送信されたものであるかを知るために使用されます。例えば、ユーザーのログイン状態を維持することができます。

Cookie の用途

  • ログイン状態などを維持
  • ユーザー設定やサイトの設定を保存
  • ユーザーの行動トラッキング記録

セッション Cookie はページ閉じられてセッション終了した時、または指定された期間が経過した後に削除されます。
Expires Max-Age 属性で Cookie の有効期限を設定します。

ブラウザによって Cookie 上限サイズが違いますが、Google Chrome 含めて多くのブラウザの Cookie は 4096byte (4k) まで保存可能です。

Cookie を作成していて Cookie が 4096 バイト未満の場合、RFC に準拠するすべてのブラウザとユーザエージェントでサポートされます。

セッション 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();
2022-04-16
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
開発におけるコーディングルール・規約