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

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

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

Cookie

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

下記記事ではキャッシュとの違いを初心者向けに解説しています。

ブラウザは、サーバーから受け取ったCookieを保存し、HTTPヘッダーに含めてHTTPリクエストを送信します。Google ChromeでCookieを利用する場合、約4KBまでのデータ保存が可能です。

このようにCookieは、サーバーとブラウザの間でやりとりされますが、JavaScriptを用いて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を削除するには、有効期限を0にするか、過去の日付を指定します。

//有効期限を過去に設定
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');
Cookies.set('key', 'value', {expires: 14}); //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を取り入れてみてはいかがでしょうか。

JavaScript関連記事