Cookieとは、Webサイトに訪問したユーザーに関する情報を記録する仕組みのことです。
あらゆるWebサイトでCookieに関する規定のポップアップを目にする機会があります。

HTTPは情報を保持しない（ステートレスな）通信です。一度ユーザーの認証が行われたとしても、HTTP通信には前の通信を引き継ぐ仕組みがないため、ブラウザ側で別途記録する必要があります。そこで利用されているのが、CookieやWeb Storageという仕組みです。

今回は、JavaScriptでのCookieの操作について取り上げます。Cookieの取得や保存方法、便利なライブラリなども解説していきます。

Cookie

Cookieとは、サーバーがブラウザに送信するデータのことです。Webサイトに訪問したユーザーのログイン情報や、ショッピングカードの内容を保持するために利用されます。

ブラウザは、サーバーから受け取ったCookieを保存しHTTPヘッダーに含めてHTTPリクエストを送信します。Google ChromeでCookieを利用する場合、約4KBまでのデータ保存が可能です。
このようにCookieは、サーバーとブラウザの間でやりとりされますが、JavaScriptを用いてCookieの書き込みや取得などの操作を行うことができます。

以下の記事ではクッキーとキャッシュの違いを初心者向けに解説しています。気になる方はチェックしてみてください。

2019.07.10

2023.09.04

【初心者向け】クッキーとキャッシュ。それぞれの違い、役割とは

インターネットを閲覧していると、「続行するには、Cookie（クッキー）を有効にしてください。」などの警告文を目にしたことがあると思います。しかし、WEBに馴染みのない方からすると、Cookie（クッキー）が何かを正確に理解している方は少ないかもしれません。 なんとなく意味を知っていても、クッ...

Cookieの操作

JavaScriptでCookieを操作するには、標準で用意されているdocument.cookieという機能と、js-cookieというライブラリを使う方法があります。

document.cookie

document.cookieを使うと、Cookieの読み書きや削除を行うことができます。

Cookieの読み込み

すべてのCookieを読み込むには、以下のように記述します。

const cookie = document.cookie;
console.log(cookie); // key=value; key=value; key=value; key=value; key=value; key=value;

Cookieは、key=valueの文字列で読み込みができ、複数のCookieが設定されている場合それぞれの情報が;で区切られています。

上記はすべてのCookieを読み込む方法ですが、特定のCookieを探す場合、正規表現や配列を使用してCookieの分割が必要です。例えば、以下のようにするとCookie毎に分割して値を取得することができます。

const cookies = document.cookie;
const array = cookies.split(';');

array.forEach(function(value) {
  const content = value.split('=');
  console.log(content[1]); // valueを取得
})
/*
value
value
value
.....
*/

Cookieの書き込み

Cookieを書き込むには、以下のように記述します。

document.cookie = "user=Tarou"; // key=value
console.log(document.cookie); // user=Tarou

先ほどCookieを読み込む際に使用したdocument.cookieに、そのままkey=valueを入れるだけです。

userというキーが既に存在している場合、Tarouという値で上書きされます。
また、複数のCookieが存在する場合は上書きされずに残ります。

書き込みの際に、オプションとしてCookieの有効期限を設定することが可能です。
この場合、max-ageまたはexpiresが使用できます。

// max-age 1時間後に消える
document.cookie = "user=Tarou; max-age=3600";

// expires　2021/11/30（月） 20:00に消える
document.cookie = "user=Tarou; expires=Mon, 30 Nov 2021 20:00:00 GMT";

Cookieの削除

Cookieを削除するには、有効期限を０にするか過去の日付を指定します。

// 有効期限を過去に設定
document.cookie = "user=Tarou; expires=Mon, 1 Nov 2021 20:00:00 GMT";
// 有効期限を0に設定
document.cookie = "user=Tarou; max-age=0";

js-cookie

document.cookie以外にも、npmパッケージのjs-cookieを導入することでより気軽に操作できるようになります。

js-cookieのインストール

npmまたはyarnコマンドでインストールしたら、JavaScriptファイルでインポートします。

$ npm i js-cookie
$ yarn add js-cookie
import Cookies from 'js-cookie';

Cookieの読み込み

Cookieの読み込みには、Cookies.get()を使用します。
引数にCookieのキーを渡すとその値を取得でき、引数を空欄にするとすべてのCookieを取得できます。

Cookies.get('key'); // 'value'
Cookies.get(); // {key: 'value'}

Cookieの書き込み

Cookieの書き込みには、Cookies.set()を使用します。
引数にCookieのキーと値を格納します。
また、有効期限の設定や、ユーザーの使用言語の設定を行うことも可能です。

Cookies.set('key', 'value');
// 14日後に消える
Cookies.set('key', 'value', {expires: 14}); 
// ユーザーの使用言語を日本語に指定
Cookies.set('locale', 'ja-JP');

Cookieの削除

Cookieを削除するには、Cookies.remove()を使用します。
引数にCookieのキーを渡すと削除できます。

Cookies.remove('key');

https(SSL/TLS)通信時のみにCookieを送信

以下のようにすると、Cookieの送信をSSL/TLS通信時のみに制限することができます。

Cookies.set('key', 'value', { secure: true });

document.cookieでもかんたんな操作はできますが、Cookieの細かい設定を行いたい場合は、js-cookieを使うと非常に便利です。

まとめ

今回は、JavaScriptでCookieを操作する方法を解説しました。

日頃から良く耳にするCookieは、JavaScriptでも気軽に操作することができます。
Cookieを操作できるようになると、Webサイト上でユーザー情報を保存したりユーザーごとに適した広告を配信したりと、あらゆる面で利便性が高まります。

これを機にCookieを取り入れてみてはいかがでしょうか。

Cookieの関連記事

・Web Storage