JavaScriptのcookieを使ってクッキーに設定した値を別ページで表示する方法をご紹介します。
前回「JavaScriptでセッションキーに設定した値を別ページで表示【sessionStorage】」をご紹介しましたが、今回はクッキー(cookie)に値を設定し、クッキーの値を別ページで表示させます。
Contents
クッキーに値を設定するページ(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>
【cookie】JavaScriptを使ってクッキーに設定した値を別ページで表示させるデモページ
【cookie】JavaScriptを使ってクッキーに設定した値を別ページで表示させるデモ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告