もくじ
この記事ではJavaScriptでCookieを保存、削除、取得、更新する方法をまとめてます。
また、「Google Chrome」のデベロッパーツール(検証ツール)でCookieを確認する方法も記載してます。
JavaScriptでCookieの値に配列・オブジェクト格納する方法は以下の記事でまとめてます。
-
【JavaScript】Cookieの値に配列・オブジェクト(連想配列)を保存・取得する方法
もくじコピペ用コードCookieの値に配列・オブジェクトを保存する関数Cookieの値に保存してある配列・オブジェクトを取得する関数使用方法setCookieObj()関数の使用方法getCookie ...
Cookieとは?
Cookieはブラウザに保存される小さなテキストデータのことです。
JavaScriptでCookieを操作する際は、document.cookie
を使用します。
Cookieを保存する方法
JavaScriptを使ってCookieにデータを保存するには、document.cookie
オブジェクトを使用し、必要なパラメータ(名前、値、有効期限など)を指定します。
以下はユーザー名を有効期限(expires)と有効範囲(path)を指定してCookieに保存するコードです。
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = 'username=momiji; expires=' + expirationDate.toUTCString() + '; path=/';
expires属性について
Cookieの有効期限を指定するための属性です。
有効期限属性を指定しない場合、Cookieはブラウザが終了するまで有効です。- path属性について
Cookieが有効であるべきURLの範囲を指定するための属性です。
この属性が指定されていない場合、サイト内の異なるパスやページでCookieにアクセスすることができます。
保存する値にセミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要
Cookieを保存する際、セミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要です。
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = 'language='+ encodeURIComponent('日本語') +'; expires=' + expirationDate.toUTCString() + '; path=/';
エンコードを行わないとどうなる?
Cookieに保存されるデータが不正確になり、問題が生じる可能性があります。
Cookieは一般的にASCII文字に最適化されており、ASCII文字以外の文字(例: 日本語等)はエンコードが必要です。
Cookieを削除(無効化)する方法
JavaScriptを使用してCookieを削除(無効化)するには、Cookieの有効期限を過去の日時に設定、または残存期間を0に設定する必要があります。
- Cookieを削除する際、Cookieを作成した時と同じ
path
やdomain
などの属性を正確に指定することが重要です。
Cookieが削除できない場合は、Cookie保存時にpath
やdomain
などを設定してなかご確認ください。
過去の日付を指定してCookieを削除
let now = new Date();
now.setFullYear(now.getFullYear() - 1); //過去の日付を設定
document.cookie = '削除対象の名前=; expires=' + now.toUTCString() + '; path=/';
削除対象の名前=;
の「削除対象の名前」部分は適宜変更してください。
「username」を削除したい場合、username=;
となります。
残存期間を0に設定してCookieを削除
document.cookie = '削除対象の名前=; max-age=0; path=/';
削除対象の名前=;
の「削除対象の名前」部分は適宜変更してください。
「username」を削除したい場合、username=;
となります。
Cookieを取得する方法
JavaScriptを使用してCookieを取得するには、document.cookie
を使用します。
document.cookie
は、ページ上で利用可能な全てのCookieを文字列で返します。
そのため、取得した文字列からCookieの値を取得できるよう以下の関数にまとめました。
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');
3行目のdecodeURIComponent()について
「保存する値にセミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要」の説明にあるように、encodeURIComponent()でエンコードされた値を、元々の値に戻す(デコードする)ためのものです。
Cookieを更新する方法
JavaScriptでCookieを更新するには、新しい値で同じ名前のCookieを再び設定します。
document.cookie = '更新対象の名前=update-momiji; path=/';
Cookieを更新する際、作成したときと同じ
path
やdomain
などの属性を正確に指定することが重要です。
同じ名前のCookieが複数登録される、あるいは更新が上手くいかない場合は、Cookie保存時にpath
やdomain
などを設定してなかご確認ください。更新対象の名前=
の「更新対象の名前」部分は適宜変更してください。
「username」を更新したい場合、username=
となります。
更新する値にセミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要
cookieを更新する際、セミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要です。
document.cookie = '更新対象の名前=' + encodeURIComponent('もみじ') + '; path=/';
更新対象の名前=
の「更新対象の名前」部分は適宜変更してください。
「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=/';
expires
とmax-age
の両方が設定されている場合、max-age
が優先されます。有効期限属性が指定されてない場合、Cookieはブラウザが終了するまで有効です。
Domain(ドメイン)属性
Cookieが有効なドメインを指定できます。(※設定する機会は少ないです)
使用例:example.com
document.cookie = 'username=momiji; domain=example.com; path=/';
ドメイン属性が指定されてない場合、現在のドメインが適用されます。
ドメイン属性を指定すると、サブドメイン(例. sub.example.com)のページにアクセスしたときにも、Cookieを送信できるようになります。
ホスト名が異なるドメインを設定することはできません。
Path(パス)属性
Cookieが有効な範囲を指定することが可能で、パスの比較は前方一致で行われます。
document.cookie = 'username=momiji; path=/example';
パス属性が設定されてない場合、同一ドメイン内の全てのページで有効になります。
パスとは?
http://example.com/aaa/bbb
の「example.com」がドメインで、その後の「/(スラッシュ)」以降がパスです。
上記の例だと「/aaa/bbb」部分がパスになります。
Secure(セキュア)属性
セキュアな接続 (HTTPS) 上でのみCookieを送信する場合に指定します。
document.cookie = 'username=momiji; secure; path=/';
secure属性を使用することで、セキュアな通信 (HTTPS) の場合のみ送信され、通常の非セキュアな通信 (HTTP) では送信されなくなります。
セキュア属性を指定する場合は、ウェブサイトがHTTPSプロトコルを使用している必要があります。
SameSite
クロスサイトリクエスト時のCookieの送信を制御する属性で、Strict
とNone
、Lax
を指定できます。
SameSite属性を指定しない場合、デフォルトの動作はブラウザに依存するため、SameSite属性を明示的に設定することが推奨されます。
2023年12月10日現在、Chromeではデフォルトでsamesite=Lax
が適用されます。
samesite=Strict;
samesite=Strict
は、同一サイトからのリクエストのみCookieが送信されます。
document.cookie = 'username=momiji; samesite=Strict; path=/';
Strict
は最も制限が厳しく、同一サイト以外へのCookieの送信を完全に禁止します。他のドメインからのリクエストに対してはCookieが送信されないため、クロスサイトリクエストによる悪意のある攻撃を防ぐことができます。
samesite=None;
samesite=None;
は、Cookieがどのサイトからでも送信されることを許可します。
document.cookie = 'username=momiji; samesite=None; secure; path=/';
samesite=None;
を使用する場合、Secure
属性も必要です。
※HTTPSで通信している場合にのみ有効です。None
は最も寛容な設定です。
samesite=Lax;
samesite=Lax
は、同一サイトからの通常のリクエストにはCookieが送信されます。
また、一部の安全なリクエスト(GETリクエストなどのトップレベルのナビゲーション)にもCookieが送信されます。
document.cookie = 'username=momiji; samesite=Lax; path=/';
Lax
はNone
とStrict
の間のような設定です。
ローカルのHTML(JavaScript)ファイルではCookieの読み書き不可
ローカルのHTML(JavaScript)ファイルからCookieの読み書きはできないため、Cookieの読み書きをする場合ローカルサーバーなどのサーバー環境が必要です。
※「file://」で始まるURLではCookieの読み書きはできません。
Chromeのデベロッパーツール(検証ツール)でCookieを確認する方法
以下の①~⑦の手順で、Cookieの情報を確認することができます。
画面右上の「︙」をクリック
「その他ツール」にマウスカーソルを合わせる
「デベロッパー ツール」をクリック
「アプリケーション」をクリック
「Cookie」をクリック
「対象のドメイン」をクリック
以下の画像のようにCookie情報が表示されます
HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊
JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊
![アイコン画像](https://webdesign-programming.com/img/icon_momiji.jpeg)
もみじ
この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。
非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。
もみじ
HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。
実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。