cookieとは
クッキーとは、ブラウザに保存される小さなデータです。クッキーので保存されたデータは、ブラウザとサーバー（ミドルウェア）の間で送受信されます。
JSからクッキーのデータを扱う場合は、以下のようなときです。
①簡易的なアンケートなどで過去に回答したことがあるか
②過去にボタンをクリックしたことがあるか
③そのWebサイトに何度訪問したことがあるか
④文字や背景色、使用言語などを変更できるサイトの設定情報
クッキーには、変数名＝値という形で、データが保存されています。これをクッキーデータといいます。
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');
};
<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: 有効期限（今回は７日）に設定します。
このクッキーは設定しなかったな場合、ブラウザを閉じた時点で消えてしまいます。
また削除処理を行った後に、パネルをすぐに非表示にする必要があるので、
document.body.removeChild(panel);を追加します。