JavaScriptのcookieを使ってクッキーに設定した値を別ページで表示する方法｜DAD UNION

JavaScriptのcookieを使ってクッキーに設定した値を別ページで表示する方法をご紹介します。
前回「JavaScriptでセッションキーに設定した値を別ページで表示【sessionStorage】」をご紹介しましたが、今回はクッキー(cookie)に値を設定し、クッキーの値を別ページで表示させます。

Contents

クッキーに値を設定するページ（index.html）のHTMLとJavaScript記述
クッキーに値を設定するページ（page2.html）のHTMLとJavaScript記述
【cookie】JavaScriptを使ってクッキーに設定した値を別ページで表示させるデモページ

クッキーに値を設定するページ（index.html）のHTMLとJavaScript記述

※document.cookie=”クッキーkey=クッキー値”;で設定します。

<h1>このページでクッキー(cookie)に設定した値を別ページで表示させます</h1>
<br>
このページではクッキー「ck1=クッキー1」と「ck2=クッキー2」をセットしました。<br>
下記のリンクをクリックすると「ck1」キーににセットした値を別ページで表示させます。<br>
ブラウザのalertダイヤログメッセージで表示されます。<br>
<br>
<br>
<a href="page2.html">「ck1」キーににセットしたクッキーの値を別ページで表示＞＞</a>

<script type="text/javascript">
var now = new Date();
now.setMinutes(now.getMinutes() + 1);  // 1分後
//1分後までcookieが有効
document.cookie = "ck1=" + encodeURIComponent('クッキー1') + ";expires=" + now.toUTCString();
document.cookie = "ck2=" + encodeURIComponent('クッキー2') + ";expires=" + now.toUTCString();
</script>

クッキーに値を設定するページ（page2.html）のHTMLとJavaScript記述

※document.cookieを使って設定した値（ck1=クッキー1;ck2=クッキー2;）を全て取得します。splitを使って文字列を分割し、指定したkeyの値のみ表示します。
最後にクッキーに有効期間を0または過去の日付を指定し設定することでクッキーを全て削除します。

<h1>このページではブラウザのalertダイヤログメッセージで<br>クッキー(cookie)「ck1」に設定されている値を表示し、<br>その後設定したクッキーを全て削除してます。</h1>

<br>
<br>

<a href="./">＜＜クッキーを設定するページに戻る</a>


<script type="text/javascript">
var cookies = document.cookie;
var cookiesArray = cookies.split(';');

for(var c of cookiesArray){
    var cArray = c.split('=');
    if( cArray[0] == 'ck1'){ // cookie key ck1の場合
        alert(decodeURIComponent(cArray));  // key ck1の値を取得
    }
}

//cookieを削除
var now = new Date();
now.setYear(now.getYear() - 1);
for(var c of cookiesArray){
    console.log(c);
    var cArray = c.split('=');
    //有効期間を0または過去の日付を指定しcookieを設定すると削除される
    document.cookie = cArray[0] + '=;max-age=0'
    document.cookie = cArray[0] + '=;expires=' + now.toGMTString();
}
</script>