【JavaScript】Cookieを獲得・削除する方法

Cookieとは？

Cookie はサイトによって作成されるテキストファイルです。閲覧情報を保存することで、ユーザー の利用設定やログイン情報を記録することができます。クッキーの内容は自分(web製作者)で作成することができます。

Cookieは基本的にブラウザとwebサーバー間でやりとりが行われますが、JavaScriptでも読み取り・書き込みをすることができます。

クッキーには「変数名=値」でデータが書き込まれています。

オープンソースライブラリ「js-cookie」を使う

js-cookieはクッキー管理をすることができるライブラリです。ダウンロードするか、CDN経由で利用することができます。

<script src="/path/to/js.cookie.js"></script>

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

cookieを作成し保存するプログラムを作ってみよう

次のようなボタンをHTMLで設置し、Cookieを取得してみましょう。

<div id="privacy-panel">
    <button id="agreebtn">クッキーデータ収集を承認する</button>
</div>

<script src="/path/to/js.cookie.js"></script>
//js-cookieを読み込む。

<script>
const agreement = Cookies.get('cookie-agree');
if(agreement === 'yes') {
    console.log('Cookie OK');
} else {
    console.log('Cookie NO');
    document.getElementById('agreebtn').onclick = function() {
        Cookies.set('cookie-agree', 'yes', {expires: 70});
    };
}
</script>

あるクッキーの値を得る：Cookie.getメソッド

Cookie.getメソッドは、js-cookieライブラリが提供するメソッドです。( )内のパラメーターで指定した名前のCookieの値を読み込みます。今回のファイルでは「cookie-agree」（後で出てきます）の値を「agreement」に代入しています。

一番初めは、「cookie-agree」なんて値のクッキーは存在していませんので、ifの分岐ではelseの方へ行きます。

onclickメソッド

onclickメソッドではagreebtnがクリックされたらイベントを発生させます。agreebtnとは、<button>タグに付けられているIDです。

 document.getElementById('agreebtn').onclick

クッキーに値を入れる：Cookie.setメソッド

Cookie.setメソッドもjs-cookieに備わっているメソッドの一つです。クッキーの名前、値、有効期限を記すことができます。

Cookies.set('cookie-agree', 'yes', {expires: 7});

上では、クッキー名がcookie-agree、値がyes、有効期限が7日間です。有効期限は{expires: 日数}で指定できます。指定しなかった場合には、ブラウザを閉じるとクッキーが削除されます。

クッキーを削除する：Cookies.removeメソッド

クッキーを削除する方法も存在します。以下のメソッドでクッキー名を指定すると、値を削除します。

Cookies.remove('クッキー名');