最近ウェブサイトを閲覧しているとよく見かけるCookie使用の同意を求められるダイアログですが、ちょうど実装する機会があり、その際にJavaScriptでCookieを読み書きする必要があったので備忘録として残しておきたいと思います。   今回サンプルとして作成する仕様としては、Cookie使用の同意を示す値がすでにCookieに登録されているかをチェックし、未登録の場合にはボタンクリックで同意を示す値をCookieに登録し、登録済みの場合にはメッセージやボタンなどのUIごと表示させないという内容になります。  

JavaScriptでCookieの値を読み書きする

大まかに分けると2つの処理が必要となります。まず1つめはCookieに値が入っているかのチェックを、2つめはボタンクリックでCookieに値を登録するという処理になります。それではまずはUI側のボタンやメッセージが含まれたダイアログ部分を作成していきます。構造としてはシンプルですが、DOM操作が発生しますのでID属性などで適宜DOMを取得できるようにしておきます。 【HTML】※一部抜粋

<div id="dialog">
  <h2>このウェブサイトはCookieを使用します</h2>
  <p>サイトの利用を続けることで、Cookieの使用に同意したことになります。</p>
  <button id="button">了承する</button>
</div>

  続いてJavaScriptでCookieの操作を行う処理を作成していきます。まずはCookie内に含まれる値から対象となるものが含まれているか検索させます。Cookieの値は「document.cookie」で参照することができ、登録済みの全ての値がキーとセットとなり文字列で返ってきます。値はセミコロンで区切られているので「split(';')」で値ごとに配列データに変換しておきます。   そしてCookieに含まれている値を1つずつチェックするのですが、その前に取得した値はキーと値が「=」で繋がってセットになっているので、それを分割させ、さらに不要なスペースも含まれている場合があるので「trim()」で削除します。これできれいにキーと値に分けられたものを新たに配列として格納していきます。最後に、このデータから対象となるキーをもとにフィルタリングして、Cookie内に指定の値が含まれているかどうかをチェックしていきます。 【JavaScript】

// Cookieへ値の読み込み・検索
const IsCookieApproval = () => {
  const cookieAllData = document.cookie.split(';');
  const cookieMaps = [];
  cookieAllData.forEach((cookieSingleData) => {
    const beforeValues = cookieSingleData.split('=');
    const afterValues = beforeValues.map((value) => value.trim());
    cookieMaps.push(afterValues);
  });
  const searchResult = cookieMaps.filter((keyAndValue) => {
    return keyAndValue[0] === 'is_approval';
  });
  if (searchResult.length === 0) {
    return false;
  } else {
    return true;
  }
}
// Cookieへ値の書き込み
const DoCookieApproval = (status) => {
  const button = document.getElementById('button');
  const dialog = document.getElementById('dialog');
  button.addEventListener('click', () => {
    if (!status) {
      document.cookie = 'cookie_approval=true';
      dialog.remove();
    }
  });
  if (status) {
    dialog.remove();
  }
}
DoCookieApproval(IsCookieApproval());

  続いて、Cookieへ値を書き込んでいく処理を作成していきます。ここでは既にCookieに値が登録されているかどうかの情報によって処理を分岐させるので、先ほど作成したCookie内に含まれる値から対象となるものが含まれているかチェックする処理の結果を引数に入るようにしておきます。後はボタンクリックでCookieに値を書き込んでいくのですが、document.cookieに対して「key=value;」の形で代入するだけでOKです。そして最後にダイアログを削除します。もともと値が含まれている場合には最初にダイアログが削除されるようにしておきます。  

Cookieの有効期限の指定

Cookieに登録した値は有効期限を設定しないと削除しない限りはずっと有効になります。もし有効期限を設定する場合には下記のように「max-age」もしくは「expires」のキーで値を指定します。

max-age	有効期限が終了するまでの秒数
expires	有効期限が終了する日付

  下記のようにCookieに値を入れる時にセミコロンで区切り続けて記載することで合わせて指定します。

document.cookie = 'key=value;max-age=6000';
document.cookie = 'key=value;expires=Sat, 28 Nov 2020 00:00:00 GMT';

  それぞれ微妙な違いがありますので使い分けに注意しておきたいですね。  

---

  今回はCookie使用の同意ダイアログをサンプルに、JavaScriptを使ってCookieへ値の読み書きなどのCookie操作を行う方法についてまとめてみました。Cookieではあまり複雑なデータは扱えませんが、一時的にデータを保存する時には便利ですし、バックエンドでも扱える情報なのでぜひ活用していきたいですね。   （参考にさせて頂いたサイト） javascriptでcookie操作