プライバシーポリシー承認パネル


cookieとは

クッキーとは、ブラウザに保存される小さなデータです。クッキーので保存されたデータは、ブラウザとサーバー(ミドルウェア)の間で送受信されます。
JSからクッキーのデータを扱う場合は、以下のようなときです。
①簡易的なアンケートなどで過去に回答したことがあるか
②過去にボタンをクリックしたことがあるか
③そのWebサイトに何度訪問したことがあるか
④文字や背景色、使用言語などを変更できるサイトの設定情報

クッキーには、変数名=値という形で、データが保存されています。これをクッキーデータといいます。

index.js
const agree = Cookies.get('cookie-agree');
const panel = document.getElementById('privacy-panel');
if(agree === 'yes') {
    document.body.removeChild(panel);
} else {
    document.getElementById('agreebtn').onclick = function() {
        Cookies.set('cookie-agree', 'yes', {expires: 7});
        document.body.removeChild(panel);
    };
}

// クッキー削除(テスト用)
document.getElementById('testbtn').onclick = function() {
    Cookies.remove('cookie-agree');
};
index.html
<div id="privacy-panel">
    <p>当サイトではユーザーエクスペリエンス向上のためクッキーを使用しています。また、匿名でアクセス状況のデータを収集しています。詳しい情報は当サイトのプライバシーポリシーをご覧ください。</p>
    <button id="agreebtn">承認する</button>
</div>

定数agreeにcookies-agreeという値を代入しています。
ここで、Cookies.getというメソッドが出てきます。これはjs-cookieライブラリが提供するものです。
*ライブラリとは、JSで複雑化する処理が複雑化するので、それを防ぐための補助プログラムです。今回つかうクッキーライブラリはオープンソースとして公開せれています。

この時点でのクッキーは、まだ定義されていない状態です。

定数panelに定数agreeの内容を代入しています。更に、privacy-panelに紐づけています。つまり、html側のprivacy-panelが代入されたことになります。

定数agreeの値がyesの場合は、定数panelの値を削除していきます。

ここで、document.body.removeChild(panel);を使用します。
bodyは取得した要素.removeChild(削除する要素)となります。
documentオブジェクトのプロパティーはbodyになります。

承認ボタンのイベントも設定していきます。agreebtnを取得します。そして、イベント設定を行います。
cookie-agreeに値yesを設定します。
{}内は、expires: 有効期限(今回は7日)に設定します。
このクッキーは設定しなかったな場合、ブラウザを閉じた時点で消えてしまいます。

また削除処理を行った後に、パネルをすぐに非表示にする必要があるので、
document.body.removeChild(panel);を追加します。

出典
https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577