プログラミング

【PR】を含みます。

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

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

この記事ではJavaScriptでCookieを保存、削除、取得、更新する方法をまとめてます。
また、「Google Chrome」のデベロッパーツール(検証ツール)でCookieを確認する方法も記載してます。

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

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

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

Cookieとは？

Cookieはブラウザに保存される小さなテキストデータのことです。

JavaScriptでCookieを操作する際は、document.cookieを使用します。

Cookieを保存する方法

JavaScriptを使ってCookieにデータを保存するには、document.cookieオブジェクトを使用し、必要なパラメータ（名前、値、有効期限など）を指定します。
以下はユーザー名を有効期限（expires）と有効範囲（path）を指定してCookieに保存するコードです。

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

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

  • path属性について
    Cookieが有効であるべきURLの範囲を指定するための属性です。
    この属性が指定されていない場合、サイト内の異なるパスやページでCookieにアクセスすることができます。

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

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

JavaSctipt
Copy
  1. let expirationDate = new Date();
  2. expirationDate.setDate(expirationDate.getDate() + 1);
  4. 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を削除

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

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

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

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

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

Cookieを取得する方法

JavaScriptを使用してCookieを取得するには、document.cookieを使用します。
document.cookieは、ページ上で利用可能な全てのCookieを文字列で返します。
そのため、取得した文字列からCookieの値を取得できるよう以下の関数にまとめました。

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

Cookieを更新する方法

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

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

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

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

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

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

JavaSctipt
Copy
  1. 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';

パス属性が設定されてない場合、同一ドメイン内の全てのページで有効になります。

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の読み書きはできないため、Cookieの読み書きをする場合ローカルサーバーなどのサーバー環境が必要です。
※「file://」で始まるURLではCookieの読み書きはできません。

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

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

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

    画面右上の「三点リーダー」をクリック

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

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

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

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

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

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

  5. 「Cookie」をクリック

    「Cookie」をクリック

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

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

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

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

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-