https://www.rakulog.com/js/cookie.js

1document.addEventListener("DOMContentLoaded", function() {
2  //Cookie許諾
3  (function() {
4    console.log('即時関数');
5
6    // DOM-Elementを取得しておく
7    const cookieConsent = document.querySelector('.cookie_consent');
8    const cookieAgree = document.querySelector('.cookie_agree');
9    const cookieReject = document.querySelector('.cookie_reject');
10  
11    if (cookieAgree && cookieReject) {
12      // Cookieを拒否した時用のFlag
13      const cookieDeleted = sessionStorage.getItem('cookieDeleted');
14      console.log({cookieDeleted});
15
16      // Cookieの有効期限（日）をSetする
17      const expire = 31;
18
19      // 1. Yes Cookie-Set-Function => 引数は有効期限(日)
20      function SetCookie(expire) {
21        const current = new Date();
22        const expireDate = new Date(current.getTime() + expire * 24 * 3600 * 1000);
23        document.cookie = `robotama-cookie=robotama-read; expires=${expireDate.toUTCString()}; path=/`;
24      }
25
26      // 2. Cookieを拒否したときに、Cookieをすべて削除するFunction
27      function DeleteAllCookie() {
28        const cookies = document.cookie.split(";");
29
30        for (let i = 0; i < cookies.length; i++) {
31          const cookie = cookies[i];
32          const eqPos = cookie.indexOf("=");
33          const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
34          document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
35        }
36      }
37
38      // 3. Popup表示のFunction
39      function PopupDisplay() {
40        cookieConsent.classList.add('is-show');
41      }
42
43      // Cookie同意ボタンにイベントを追加する
44      cookieAgree.addEventListener('click', () => {
45        // 表示クラスを削除してからアニメーションクラスを追加
46        cookieConsent.classList.remove('is-show');
47        cookieConsent.classList.add('cc-hide2');
48
49        // ゆっくり非表示にするアニメーションが終了したら非表示クラスを追加
50        cookieConsent.addEventListener('animationend', () => {
51            cookieConsent.classList.add('cc-hide2');
52        });
53
54        SetCookie(expire);
55
56        // リロード後も状態を保持するため、セッションストレージに保存
57        sessionStorage.setItem('cookieDeleted', false);
58
59        // 同意したことをコンソールに出力
60        console.log("クッキーの受け入れに同意しています");
61      });
62
63      // Cookie拒否ボタンにイベントを追加する
64      cookieReject.addEventListener('click', () => {
65        // 表示クラスを削除してからアニメーションクラスを追加
66        cookieConsent.classList.remove('is-show');
67        cookieConsent.classList.add('cc-hide2');
68
69        // ゆっくり非表示にするアニメーションが終了したら非表示クラスを追加
70        cookieConsent.addEventListener('animationend', () => {
71            cookieConsent.classList.add('cc-hide2');
72        });
73
74        // Cookie拒否Userは、SessionStorageで管理
75        // Sessionが切れれば、また表示される
76        sessionStorage.setItem('cookieDeleted', true);
77        DeleteAllCookie();
78
79        // リロード後も状態を保持するため、セッションストレージに保存
80        sessionStorage.setItem('cookieDeleted', true);
81
82        // Cookieが削除されたことをコンソールに出力
83        console.log("Cookie は削除されています。");
84      });
85
86      // 初回アクセス時かつ、Cookie同意Flagが立っていない場合、ポップアップを表示する
87      if (!cookieDeleted && document.cookie.indexOf('robotama-cookie=robotama-read') === -1) {
88        PopupDisplay();
89      }
90    }
91  })();
92});