JavaScript

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

  /

JavaScriptを使ってクッキー（cookie）に値を設定し、その値を別のページで表示する方法について解説します。前回の記事で、「sessionStorage活用ガイド:JavaScriptで異なるページ間のデータ共有を実現する方法」を紹介しましたが、今回はクッキーを使用した方法をご紹介します。クッキーを使うことで、セッションの終了後やブラウザを閉じてもデータが保持されるため、より長期的なデータの管理が可能になります。

Contents

cookieとは？

クッキーとは、ウェブサイトがユーザーのブラウザに保存する小さなデータのことです。これにより、ユーザーのブラウザがサイトを再訪した際に、特定の設定や情報が自動的に読み込まれるようになります。たとえば、ユーザーの言語設定やログイン情報を保持するなど、ユーザーエクスペリエンスを向上させるために利用されます。

クッキーは、JavaScriptを使って簡単に設定したり、取得したり、削除したりすることができます。この記事では、実際にクッキーに値を設定し、それを別ページで取得して表示する方法を解説します。

クッキーに値を設定するページの例（index.html）

まずは、クッキーに値を設定するページを作成します。以下の例では、「ck1=クッキー1」と「ck2=クッキー2」という2つのクッキーを設定しています。これらのクッキーは1分間有効で、その後は自動的に無効になります。

<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>

このコードでは、document.cookieを使用してクッキーを設定しています。encodeURIComponentを使って、クッキーの値をエンコードすることで、特定の文字（例えばスペースや日本語）がクッキーに正しく保存されるようにしています。また、expires属性を使ってクッキーの有効期限を指定しています。

クッキーの値を表示するページの例（page2.html）

次に、クッキーに設定された値を取得し、別のページで表示する方法です。以下のコードでは、document.cookieを使ってすべてのクッキーを取得し、splitメソッドを使ってクッキーのキーと値を分割し、特定のキーの値だけを表示します。
最後にクッキーに有効期間を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>

このコードでは、まずdocument.cookieで全てのクッキーを取得し、split(‘;’)で個々のクッキーに分割します。そして、split(‘=’)でクッキー名とその値をさらに分割し、特定のクッキー（ここでは「ck1」）を見つけて、その値をalertで表示します。最後に、有効期限を過去に設定することでクッキーを削除しています。

【cookie】JavaScriptを使ってクッキーに設定した値を別ページで表示させるデモページ

上記で紹介した方法を使って、クッキーに設定した値を別ページで表示させる実際のデモページをご覧いただけます。ぜひお試しください！

【cookie】JavaScriptを使ってクッキーに設定した値を別ページで表示させるデモ

まとめ

クッキーは、ユーザーのブラウザにデータを保存するための強力なツールです。JavaScriptを使えば、簡単にクッキーを設定したり、別ページでその値を取得して表示することができます。また、クッキーの有効期限を指定することで、データの保持期間をコントロールできる点も便利です。

このように、クッキーは様々な場面で役立つため、うまく活用してユーザーエクスペリエンスを向上させましょう。さらに、クッキーの削除も簡単に行えるため、不要なデータが溜まり続ける心配もありません。

この記事では、わかりやすくクッキーを利用したデータの保持とその表示方法について解説しました。クッキーの使い方に慣れれば、ウェブ開発の幅が広がりますので、ぜひ実践してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

cookie クッキー
関連記事