JavaScriptでCookieを操作する方法【取得・作成・更新・削除の基本を解説】

Cookie（クッキー）は、Webブラウザにユーザーに関するデータを保存するための重要な仕組みです。ログイン状態の維持など、認証セッション情報の保存によく使われており、ブラウザは「あなたがそのサイトにログイン済みであること」を記憶できます。

この記事では、Cookieが存在する理由、Cookieの種類、そしてJavaScriptでCookieを操作する方法について解説します。

ブラウザCookieとは？

Cookieとは、ユーザーのブラウザ内に情報を保存するための小さなテキスト文字列です。この仕組みを最初に考案したのはNetscapeで、1990年代に世界で最も人気のあるブラウザの一つを開発していた同社が、ユーザーが以前にそのサイトを訪れたことがあるかどうかを追跡する目的でCookieを導入しました。

Cookieには最低限、「名前（name）」と「値（value）」の2つのフィールドが必要です。名前フィールドは、値フィールドの内容を識別するために使われます。用途に応じて、有効なパスや有効期限といった追加属性を持たせることも可能です。

Cookieの記述例は次のとおりです。

Name: Authentication
Value: AUTHENTICATION_KEY
Domain: careerkarma.com

Cookieは「キー:値」のペアとして保存されます。このCookieを参照すると、次のように表示されます。

Authentication=AUTHENTICATION_KEY

このCookieは、ブラウザに「AUTHENTICATION_KEY」という値を保存します。careerkarma.comドメインにアクセスするたびに、このCookieがサイト側から利用できるようになります。

1つのサイトに設定できるCookieの数に厳密な上限はありませんが、実際にはほとんどのアプリケーションで必要なCookieはごくわずかです。多くの場合、Cookieはユーザーセッションの管理に使われています。

ブラウザCookieの取得方法

JavaScriptには、サイトで利用可能なすべてのCookie情報を保持する document.cookie オブジェクトがあります。Cookieの設定・更新・削除は、このオブジェクトを操作することで行います。Cookieを取得するには、単純にこのオブジェクトを呼び出すだけです。

console.log(document.cookie);

このコードを実行すると、ブラウザに設定されているすべてのCookieの一覧が返されます。なお、個別のCookieだけを取り出したい場合は、独自の関数を作成する必要がある点に注意してください。

Cookieの設定（作成）方法

Cookieの作成は、お菓子のクッキーを焼くよりもはるかに簡単です。ここでは、ユーザーのメールアドレスをCookieに保存する例を見てみましょう。

document.cookie = "email=user@email.com";
console.log(document.cookie);

このコードは、「email」という名前、「user@email.com」という値を持つCookieを作成します。console.log() の出力は次のとおりです。

email=user@email.com;

パス（path）の指定

Cookieが利用できるパスを限定することもできます。

document.cookie = "email=user@email.com; path=/dashboard";

このコードにより、「email」Cookieは「/dashboard」で始まるすべてのパスでのみ利用可能になります。

Cookieの有効期限

デフォルトでは、Cookieはブラウザを閉じると削除されます。Cookieを設定するときに有効期限（expires）を指定すると、この挙動を上書きできます。

document.cookie = "email=user@email.com; expires=Wed, 24 Jun 2020 12:00:00 UTC";

このコードは、2020年6月24日12:00（UTC）に失効するCookieを作成します。有効期限はUTC時刻で指定する必要があります。

Dateオブジェクトを使った有効期限の指定

有効期限を指定する一般的な方法の一つが、UTCタイムスタンプを返すJavaScriptのDateオブジェクトを使う方法です。2020年6月30日に失効するCookieは、次のコードで設定できます。

const expiryDate = new Date(2020, 6, 30);
document.cookie = "email=user@email.com; expires=" + expiryDate + ";";

Max-Age属性を使う方法

document.cookie は、Cookieの最大寿命（Max-Age）もサポートしています。Max-Ageは、Cookieが作成されてから失効するまでの秒数を指定します。すべてのブラウザでサポートされているわけではありませんが、Cookie作成の時点から相対的に失効時期を決められるため便利です。

const expiryDate = 24 * 60 * 60 * 2;
document.cookie = "email=user@email.com; max-age=" + expiryDate + ";";

このコードは、2日後に失効するCookieを作成します。

Cookieの更新と削除

Cookieの更新や削除のための専用関数は用意されていません。代わりに、document.cookie オブジェクトを直接変更します。

Cookieの更新は、作成時と同じ方法で行えます。

document.cookie = "email=user@email.app";

これにより、「email」Cookieの値が「user@email.com」から「user@email.app」に変更されます。

Cookieの削除も似たようなアプローチです。作成・更新と同じ構文を使い、値を空にして、過去の日付を有効期限に指定します。

document.cookie = "email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

意図したCookieを確実に削除するためには、作成時に指定したものと同じpathを明示してください。

Cookieの種類

ラズベリー、チョコチップ、ファッジ……いえ、そういうクッキーの話ではありません！ ブラウザにおけるCookieには、主に「セッション」「永続的」「サードパーティ」の3種類があります。

セッションCookieは、ブラウザを閉じるまで存在するCookieです。有効期限を設定せずに作成されたCookieがこれに該当します。なお、「セッションCookie」という用語を「ユーザー認証に使われるCookie全般」を指す意味で使う開発者もいますが、認証に利用できるのはセッションCookieだけではありません。

永続的Cookieは、ブラウザを閉じた後も存在し続けるCookieです。有効期限が設定されたCookieがこれに該当します。

サードパーティCookieは、他のWebサイトによって作成されたCookieです。代表的な例がGoogle AnalyticsのCookieです。自分のサイトにGoogle Analyticsを導入すると、そのスクリプトがユーザーを追跡するためのCookieを設定できるようになります。

まとめ

Cookieは、ユーザー情報をブラウザに保存するための便利な仕組みです。ユーザーが以前にそのサイトを訪れたかどうかの追跡や、認証情報の保存などに広く使われています。

Cookieには主に「セッション」「永続的」「サードパーティ」の3種類があります。独自のアプリケーションを開発する際には、主にセッションCookieと永続的Cookieを扱うことになるでしょう。