【PR】を含みます。

フロントエンド

【JavaScript】Cookieを操作(保存・削除・取得・更新)する方法

JavaScript Cookieを操作(保存・削除・取得・更新)する方法

本記事では、JavaScriptを使ってCookieを保存・取得・削除・更新する基本的な方法を、初心者にも分かりやすく解説します。

また、Cookieの各種属性（expires, path, domain, secure, samesite）の役割や設定例、Google ChromeのデベロッパーツールでCookieを確認する手順も解説します。

Cookieの仕組みを正しく理解し、安全で便利なWebサイトを作りましょう。

JavaScriptでCookieの値に配列・オブジェクト格納する方法は以下の記事でまとめています。

あわせて読む
Cookieの値に配列・オブジェクトを保存・取得する方法

【JavaScript】Cookieの値に配列・オブジェクト(連想配列)を保存・取得する方法

もくじコピペ用コードCookieの値に配列・オブジェクトを保存する関数Cookieの値に保存してある配列・オブジェクトを取得する関数使用方法setCookieObj()関数の使用方法getCookie ...

Cookieとは？

Cookie（クッキー）とは、Webサイトがユーザーのブラウザに保存する小さなテキストデータです。

主に以下のような用途で利用されます。

  • ログイン状態の保持などのセッション管理
  • ユーザー設定や入力情報の保存
  • アクセス解析や広告のトラッキング

Cookieは、Webサイトからブラウザに送信され、次回以降のアクセス時に同じドメインへ自動的に送信されます。

これにより、ユーザーごとに異なる情報をWebサイト側で管理できます。

Cookieの仕組み

Cookieは、サーバーからのレスポンスやJavaScriptによってブラウザに保存されます。

保存されたCookieは、同じドメインへのリクエスト時に自動的にリクエストヘッダーに付与されて送信されます。

Cookieのメリット・デメリット

  • メリット：ユーザーごとの情報を簡単に保存・管理できる
  • デメリット：保存容量が少ない（約4KB）、セキュリティリスク（盗聴・改ざん）に注意が必要

Cookieと他のWebストレージの違い

  • Cookie：サーバーにも自動送信される。主にセッション管理や認証に利用。
  • localStorage / sessionStorage：サーバーには送信されず、クライアント側のみで利用。容量が大きい。

セキュリティ上の注意

  • 重要な情報（パスワードや個人情報）はCookieに保存しない
  • Secure属性やHttpOnly属性を活用し、盗聴やXSS攻撃を防ぐ

Cookieを保存する方法

JavaScriptを使ってCookieにデータを保存するには、document.cookieオブジェクトを使用し、必要なパラメータ（名前、値、有効期限など）を指定します。

以下はユーザー名を有効期限（expires）と有効範囲（path）を指定してCookieに保存するコードです。

Copyをクリックするとコピーできます。

JavaScript
Copy
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = 'username=momiji; expires=' + expirationDate.toUTCString() + '; path=/';
POINT

  • expires属性について
    Cookieの有効期限を指定するための属性です。
    有効期限属性を指定しない場合、Cookieはブラウザが終了するまで有効です。

  • path属性について
    Cookieが有効であるべきURLの範囲を指定するための属性です。
    この属性が指定されていない場合、同一ディレクトリおよびその配下のパスでCookieにアクセスできます。

保存する値にセミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要

Cookieを保存する際、セミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要です。

Copyをクリックするとコピーできます。

JavaScript
Copy
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = 'language='+ encodeURIComponent('日本語') +'; expires=' + expirationDate.toUTCString() + '; path=/';
POINT

  • エンコードを行わないとどうなる？
    Cookieに保存されるデータが不正確になり、問題が生じる可能性があります。
    Cookieは一般的にASCII文字に最適化されており、ASCII文字以外の文字(例: 日本語等)はエンコードが必要です。

Cookieを削除(無効化)する方法

JavaScriptを使用してCookieを削除(無効化)するには、Cookieの有効期限を過去の日時に設定、または残存期間を0に設定する必要があります。

POINT
  • Cookieを削除する際、Cookieを作成した時と同じpathやdomainなどの属性を正確に指定することが重要です。
    Cookieが削除できない場合は、Cookie保存時にpathやdomainなどを設定していないかご確認ください。

過去の日付を指定してCookieを削除

JavaScript
Copy
let now = new Date();
now.setFullYear(now.getFullYear() - 1); //過去の日付を設定
document.cookie = '削除対象の名前=; expires=' + now.toUTCString() + '; path=/';
POINT

  • 削除対象の名前=;の「削除対象の名前」部分は適宜変更してください。
    「username」を削除したい場合、username=;となります。

残存期間を0に設定してCookieを削除

Copyをクリックするとコピーできます。

JavaScript
Copy
document.cookie = '削除対象の名前=; max-age=0; path=/';
POINT

  • 削除対象の名前=;の「削除対象の名前」部分は適宜変更してください。
    「username」を削除したい場合、username=;となります。

Cookieを取得する方法

JavaScriptを使用してCookieを取得するには、document.cookieを使用します。

document.cookieは、ページ上で利用可能な全てのCookieを文字列で返します。

そのため、取得した文字列からCookieの値を取得できるよう以下の関数にまとめました。

Copyをクリックするとコピーできます。

JavaScript
Copy
function getCookie(cookieName) {
  let name = cookieName + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let cookieArray = decodedCookie.split(';');
  for(let i = 0; i < cookieArray.length; i++) {
    let cookie = cookieArray[i].trim();
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  // 指定されたクッキーが見つからない場合「null」を返す
  return null;
}
/*
  例: 'username' という名前のクッキーを取得する
  userName にはクッキーの値が格納されます
*/
let userName = getCookie('username');
POINT

Cookieを更新する方法

JavaScriptでCookieを更新するには、新しい値で同じ名前のCookieを再び設定します。

Copyをクリックするとコピーできます。

JavaScript
Copy
document.cookie = '更新対象の名前=update-momiji; path=/';
POINT

  • Cookieを更新する際、作成したときと同じpathやdomainなどの属性を正確に指定することが重要です。
    同じ名前のCookieが複数登録される、あるいは更新が上手くいかない場合は、Cookie保存時にpathやdomainなどを設定していないかご確認ください。

  • 更新対象の名前=の「更新対象の名前」部分は適宜変更してください。
    「username」を更新したい場合、username=となります。

更新する値にセミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要

cookieを更新する際、セミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要です。

Copyをクリックするとコピーできます。

JavaScript
Copy
document.cookie = '更新対象の名前=' + encodeURIComponent('もみじ') + '; path=/';
POINT

  • 更新対象の名前=の「更新対象の名前」部分は適宜変更してください。
    「username」を更新したい場合、username=となります。

Cookieの主な属性

Expires属性 or Max-Age属性(有効期限)

expires属性は具体的な日時を指定することが可能で、指定した日時までCookieが有効になります。

使用例: 2025年8月15日12時00分00秒

document.cookie = 'username=momiji; expires=Mon, 11 Aug 2025 12:00:00 GMT; path=/';

max-age属性は秒単位の期間を指定することが可能で、有効期限を経過するとCookieが無効になります。

使用例: 1時間後

document.cookie = 'username=momiji; max-age=3600; path=/';

POINT

  • expiresとmax-ageの両方が設定されている場合、max-ageが優先されます。

  • 有効期限属性が指定されてない場合、Cookieはブラウザが終了するまで有効です。

Domain(ドメイン)属性

Cookieが有効なドメインを指定できます。(※設定する機会は少ないです)

使用例: example.com

document.cookie = 'username=momiji; domain=example.com; path=/';

POINT

  • ドメイン属性が指定されてない場合、現在のドメインが適用されます。

  • ドメイン属性を指定すると、サブドメイン(例. sub.example.com)のページにアクセスしたときにも、Cookieを送信できるようになります。

  • ホスト名が異なるドメインを設定することはできません。

Path(パス)属性

Cookieが有効な範囲を指定することが可能で、パスの比較は前方一致で行われます。

document.cookie = 'username=momiji; path=/example';

パス属性が設定されていない場合、Cookieを設定したパスとその配下で有効になります。

POINT

  • パスとは？
    http://example.com/aaa/bbbの「example.com」がドメインで、その後の「/(スラッシュ)」以降がパスです。
    上記の例だと「/aaa/bbb」部分がパスになります。

Secure(セキュア)属性

セキュアな接続 (HTTPS) 上でのみCookieを送信する場合に指定します。

document.cookie = 'username=momiji; secure; path=/';

POINT

  • secure属性を使用することで、セキュアな通信 (HTTPS) の場合のみ送信され、通常の非セキュアな通信 (HTTP) では送信されなくなります。

  • セキュア属性を指定する場合は、ウェブサイトがHTTPSプロトコルを使用している必要があります。

SameSite

クロスサイトリクエスト時のCookieの送信を制御する属性で、StrictとNone、Laxを指定できます。

POINT

  • SameSite属性を指定しない場合、デフォルトの動作はブラウザに依存するため、SameSite属性を明示的に設定することが推奨されます。
    2023年12月10日現在、Chromeではデフォルトでsamesite=Laxが適用されます。

samesite=Strict;

samesite=Strictは、同一サイトからのリクエストのみCookieが送信されます。

document.cookie = 'username=momiji; samesite=Strict; path=/';

POINT

  • Strictは最も制限が厳しく、同一サイト以外へのCookieの送信を完全に禁止します。

  • 他のドメインからのリクエストに対してはCookieが送信されないため、クロスサイトリクエストによる悪意のある攻撃を防ぐことができます。

samesite=None;

samesite=None;は、Cookieがどのサイトからでも送信されることを許可します。

document.cookie = 'username=momiji; samesite=None; secure; path=/';

POINT

  • samesite=None;を使用する場合、Secure属性も必要です。
    ※HTTPSで通信している場合にのみ有効です。

  • Noneは最も寛容な設定です。

samesite=Lax;

samesite=Laxは、同一サイトからの通常のリクエストにはCookieが送信されます。

また、一部の安全なリクエスト（GETリクエストなどのトップレベルのナビゲーション）にもCookieが送信されます。

document.cookie = 'username=momiji; samesite=Lax; path=/';

POINT

  • LaxはNoneとStrictの間のような設定です。

ローカルのHTML(JavaScript)ファイルではCookieの読み書き不可

ローカルのHTML(JavaScript)ファイルからCookieの読み書きをすることはできません。

※「file://」で始まるURLではCookieの読み書きはできません。

Cookieの読み書きをする場合、ローカルサーバーなどのサーバー環境が必要です。

Chromeのデベロッパーツール(検証ツール)でCookieを確認する方法

以下の①～⑦の手順で、Cookieの情報を確認することができます。

  1. 画面右上の「︙」をクリック

    Cookie確認説明画像1

  2. 「その他ツール」にマウスカーソルを合わせる

    Cookie確認説明画像2

  3. 「デベロッパー ツール」をクリック

    Cookie確認説明画像3

  4. 「アプリケーション」をクリック

    Cookie確認説明画像4

  5. 「Cookie」をクリック

    Cookie確認説明画像5

  6. 「対象のドメイン」をクリック

    Cookie確認説明画像6

  7. 以下の画像のようにCookie情報が表示されます

    Cookie確認説明画像7

まとめ

本記事では、JavaScriptでCookieを「保存」「取得」「更新」「削除」する基本的な方法と、各属性（expires, max-age, path, domain, secure, samesite）の役割や注意点について解説しました。

Cookieを扱う際は、以下が重要です。

  • 値に日本語や記号が含まれる場合はエンコードを行う
  • 削除や更新時はpathやdomain属性を正確に指定する
  • セキュリティや有効範囲を考慮して属性を適切に設定する

また、ローカルファイル（file://）ではCookieの読み書きができないため、必ずサーバー環境で動作確認を行いましょう。

Cookieの仕組みを正しく理解し、用途やセキュリティ要件に合わせて適切に活用してください。

JavaScriptでCookieの値に配列・オブジェクト格納する方法は以下の記事でまとめています。

あわせて読む
Cookieの値に配列・オブジェクトを保存・取得する方法

【JavaScript】Cookieの値に配列・オブジェクト(連想配列)を保存・取得する方法

もくじコピペ用コードCookieの値に配列・オブジェクトを保存する関数Cookieの値に保存してある配列・オブジェクトを取得する関数使用方法setCookieObj()関数の使用方法getCookie ...

-フロントエンド
-