【JavaScript】Cookieの使い方(取得や削除など)を分かりやすく解説！

この記事ではWebブラウザの保存領域である『Cookie』について、

  • Cookieの特徴
  • Cookieを書き込み(保存)・読み込み・削除する方法

などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Cookieとは

CookieはWebブラウザに保存することができるテキストデータです。

Webサーバーにアクセスした時、WebサーバーからWebブラウザに対してCookieが送信されて保存したり、逆にWebブラウザからWebサーバーに対して保存しているCookieを送信したりします。

Cookieは名前と値のペア(key=value)の形式で保存されており、window.documentオブジェクトのcookieプロパティを用いると、Webブラウザに保存されているCookieを読み込んだり、Cookieに値を書き込んだりすることができます。

ではこれから、JavaScriptを用いたCookieの操作方法について、以下の内容を説明します。

  • Cookieを書き込む方法(保存する方法)
  • Cookieを読み込む方法
    • 特定のCookieを読み込む方法
  • Cookieを削除する方法
    • 全てのCookieを削除する方法
  • 特定のCookieの存在を確認する方法
  • 特定のCookieが特定の値を持っていることを確認する方法

あわせて読みたい

Cookieはデベロッパーツールで確認することができます。

『Google ChromeのデベロッパーツールでCookieを確認する方法』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

Google ChromeのデベロッパーツールでCookieを確認する方法
Google ChromeのデベロッパーツールでCookieを確認する方法

続きを見る

Cookieを書き込む方法(保存する方法)

window.documentオブジェクトのCookieプロパティに対して値を代入することで、Cookieに書き込むことができます。

サンプルコードを以下に示します。

document.cookie = 'name=Taro';
console.log(document.cookie);
// ログ出力
// name=Taro

Cookieは、key=valueのペアで保存されているため、Cookieに書き込む際にもkey=valueのペアを代入します。なお、指定したキーが存在しなければ新規に作成され、既存のキーが存在すれば、既存の値は上書き更新されます。

補足

Cookieには複数のkey=valueのペアを保存することもできますが、一度に書き込めるのは1つだけです。

// 誤った方法
document.cookie = 'name=Taro; session_id=ABC123';

// 正しい方法
document.cookie = 'name=Taro';
document.cookie = 'session_id=ABC123';

また、key=Valueにスペース、カンマ(,)、セミコロン(;)、日本語などが含まれる場合はURLエンコードされた上でCookieに格納する必要があります。

const myname = encodeURIComponent('山田');
document.cookie = 'name=' + myname;

Cookieを読み込む方法

window.documentオブジェクトのcookieプロパティを参照することで、現在開いているWebページに保存してある全てのCookieを読み込むことができます。

サンプルコードを以下に示します。

const cookie = document.cookie;
console.log(cookie);
// ログ出力(一例)
// "name=Taro; session_id=ABC123; language=ja"

Cookieは、key=valueのペアで保存されています。複数のCookieが保存されている場合、それぞれの情報がセミコロン(;)で区切られています。

補足

それぞれのkeyあるいはvalueの周りにはホワイトスペース(空白やタブ文字)をおくことができます。RFC6265ではそれぞれのセミコロンの後に１文字分のスペースを入れることを推奨しています(この推奨事項は、読みやすさのためのものであり、1文字分のスペースを入れることは必須ではありません)。

特定のCookieを読み込む方法

以下のサンプルコードでは、特定の名前(以下のプログラム例ではname)のCookieの値を取得しています。

<!DOCTYPE html>
<html>
  <body>
    <button onclick="alertCookieValue()">Showcookievalue</button>

    <script>
      document.cookie = 'name=Taro';
      document.cookie = 'session_id=ABC123';

      const cookieValue = document.cookie
        .split(';')
        .find((row) => row.startsWith('name'))
        .split('=')[1];

      function alertCookieValue() {
        alert(cookieValue);
      }
    </script>
  </body>
</html>

上記のサンプルコードでは2つのCookieをセットし、次にそれらの中からnameという名前のCookieのみを取り出しています。そして、取得したCookieの値をアラートで表示する関数alertCookieValue()とその関数を呼び出すボタンが用意しています。

Cookieを削除する方法

Cookieを削除するには、Cookieの書き込み時にMax-Age属性を使用してCookieの有効期限を0秒にするか、Expires属性を使用して過去の日付を設定します。以下のサンプルコードでは、nameという名前のCookieを削除しています。

//有効期限を0秒に設定
document.cookie = 'name=; max-age=0';
//有効期限を過去に設定
document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

あわせて読みたい

『Cookieの各属性の意味や設定方法』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

【Cookieの属性】「設定方法」などを分かりやすく解説！
【Cookieの属性】「設定方法」などを分かりやすく解説！

続きを見る

全てのCookieを削除する方法

Webブラウザに保存されているすべてのCookieを削除するには、保存されている各Cookieに対して、有効期限を過去の日付を設定するか、Cookieの有効期限を0秒にする必要があります。

// すべてのCookieを取得し、配列に分割する
const cookies = document.cookie.split(';');

for (let i = 0; i < cookies.length; i++) {
  let cookie = cookies[i];

  // = の位置を見つけ、その位置を基にCookieの名前の部分だけを切り出す。
  let eqPos = cookie.indexOf('=');
  let name = eqPos > -1 ? cookie.slice(0, eqPos) : cookie.trim();

  // Cookieの名前を使用して、期限を過去に設定し削除する
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
}

上記のサンプルコードでは、document.cookie.split(";")で取得したすべてのCookieをセミコロンで分割し、ループを使って一つ一つのCookieに対して操作を行っています。上記のサンプルコードを実行すると、すべてのCookieが削除されます。ただし、HttpOnly 属性が設定されているCookieは、JavaScriptからは削除できない点に注意してください。

let eqPos = cookie.indexOf('=');

上記のプログラムは、cookieという文字列の中で=の文字が最初に現れる位置を探しています。indexOfメソッドは、指定された文字が見つかればその位置(0から始まるインデックス)を返し、見つからなければ-1を返しています。

let name = eqPos > -1 ? cookie.slice(0, eqPos) : cookie.trim();

上記のプログラムにおいて、条件eqPos > -1は、=がcookie文字列内に存在するかどうかをチェックしています。もし=が存在する(つまりindexOfが-1より大きい値を返す)ならば、cookie.slice(0, eqPos)により、=の位置までの部分文字列(Cookieの名前部分)を取り出しています。

slice(0, eqPos)は、文字列の0番目のインデックスから=が見つかったインデックスの直前までの部分文字列を切り出しています。例えば、cookieが"name=Taro"であれば、"name"が返されます。

もし=が存在しない(Cookieの文字列がkey=valueの形式でなく、単にkeyのみの場合)、cookie.trim()により、cookie文字列の前後のホワイトスペースを削除することで、正しいCookieの名前を取得しています。

Cookieの存在を確認する方法

以下のサンプルコードでは、特定の名前(以下のプログラム例ではname)のCookieがWebブラウザに存在するかどうかをチェックしています。

if (
  document.cookie.split(';').some((item) => item.trim().startsWith('name='))
) {
  console.log('The cookie "name" exists');
}

上記のサンプルコードの説明を以下に示します。

  • document.cookieでWebブラウザに保存されているCookieを取得しています。
  • split()メソッドで取得したCookieをセミコロン(;)で分割し、Cookieの配列を作成しています。
  • some()メソッドで配列の各要素に対して関数を実行し、指定された条件を満たす要素が一つでもあればtrueを返しています。
  • (item) => item.trim().startsWith("reader=")では、各Cookieをトリム(前後の空白を削除)し、name=で始まるかどうかをチェックしています。これにより、名前がnameのCookieが存在するかを確認しています。
  • Cookieが存在する場合には、console.log()メソッドを用いてメッセージをコンソールに出力しています。

特定のCookieが特定の値を持っていることを確認する方法

以下のサンプルコードでは、特定の名前(以下のプログラム例ではname)のCookieが特定の値(Taro)であるかをチェックしています。

if (document.cookie.split(';').some((item) => item.includes('name=Taro'))) {
  console.log('The cookie "name" has "Taro" for value');
}

上記のサンプルコードの説明を以下に示します。

  • document.cookieでWebブラウザに保存されているCookieを取得しています。
  • split()メソッドで取得したCookieをセミコロン(;)で分割し、Cookieの配列を作成しています。
  • some()メソッドで配列の各要素に対して関数を実行し、指定された条件を満たす要素が一つでもあればtrueを返しています。
  • (item) => item.includes('name=Taro')では、各Cookieにname=Taroという文字列が含まれているかどうかをチェックします。つまり、nameという名前のCookieがTaroという値を持っているかどうかを確認しています。
  • Cookieが存在する場合には、console.log()メソッドを用いてメッセージをコンソールに出力しています。

本記事のまとめ

この記事ではWebブラウザの保存領域である『Cookie』について、以下の内容を説明しました。

  • Cookieの特徴
  • Cookieを書き込み(保存)・読み込み・削除する方法

お読み頂きありがとうございました。