💾

CookieとLocalStorageとSessionStorageの違い

に公開
cookie
localstorage
sessionStorage
tech

この記事の目的

  • CookieとLocalStorageとSessionStorageの基礎を理解する
  • それぞれの違いを整理して理解する
  • 他人に説明できるようになる

Cookieとは

  • サーバーがユーザーのウェブブラウザーに送信する小さなデータ
  • 保存期間を設定することが出来る（数分〜数年まで自由）
  • データ容量は4KBと小さい
  • リクエストのたびに自動送信されるため、通信量やパフォーマンスに影響することもある

LocalStorageとは

  • Web Storage APIの一種
  • 物理的にデータをユーザーの端末に保存するので、オフラインでの利用が可能
  • データ容量は約5MB
  • ブラウザを閉じてもデータが消えない
  • JavaScriptから簡単にアクセスできるため、セキュリティリスクが高い

SessionStorageとは

  • Web Storage APIの一種
  • 1セッション（ブラウザタブごと）で有効
  • タブやウィンドウを閉じるとデータは消去される
  • データ容量は約5MB
  • タブ間でデータ共有はできない

それぞれのデータの取得・保存例

// Cookieの保存（有効期限を指定）
document.cookie = "username=Taro; max-age=3600"; // 1時間有効

// Cookieの取得（全Cookie文字列）
console.log(document.cookie);

LocalStorage

// 保存
localStorage.setItem("theme", "dark");

// 取得
const theme = localStorage.getItem("theme");
console.log(theme); // "dark"

// 削除
localStorage.removeItem("theme");

SessionStorage

// 保存
sessionStorage.setItem("keyword", "犬");

// 取得
const keyword = sessionStorage.getItem("keyword");
console.log(keyword); // "犬"

// 削除
sessionStorage.removeItem("keyword");

それぞれの使い分け

  • 有効期限付きでデータを保存したい場合
  • サーバーサイドでもデータを利用したい場合

使用例:

  • 多言語サイトでの言語設定
  • 「ログイン状態を保持する」チェックボックス

LocalStorage

  • 長期的にデータを保存したい場合
  • オフラインでもデータを使いたい場合

使用例:

  • 閲覧履歴や「最近見た商品」の保存
  • テーマカラーやレイアウト設定の保存

SessionStorage

  • 一時的にデータを保存したい場合
  • タブを閉じてデータを消去したい場合

使用例：

  • 検索条件や入力中フォームの一時保存
  • ショッピングサイトでの一時的なフィルター条件

まとめ

今回は勉強のために、クライント側にデータを保存する3つの主要な仕組みについてまとめました。
基礎的な部分は理解できましたが、今後は実装に落とし込むところまで活用していきたいと思います！

参考

https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/Cookies
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API
https://call.omnidatabank.jp/blog/localstorage/
https://note.com/broccolinlin/n/ne8639d91d2ed

Discussion