ボタンクリックで、クッキーを設定、取得、削除

投稿日: 2014年3月10日 作成者: alphasis

ボタンクリックで、クッキーを設定、取得、削除するJavaScriptサンプル。

サンプル（実装例）

クッキーＡにセットする値：

クッキーＢにセットする値：

削除：

クッキーＡの値：

クッキーＢの値：

サンプル（実装例）の動作について

  • 「クッキーＡにセットする値：」の右横のボタンをクリックすると、クリックしたボタン名を、クッキーＡの値に設定する。
  • 「クッキーＢにセットする値：」の右横のボタンをクリックすると、クリックしたボタン名を、クッキーＢの値に設定する。
  • 「削除：」の右横のボタンをクリックすると、クリックしたボタン名のクッキーを削除する。
  • 「クッキーの値を表示」ボタンをクリックすると、クッキーＡとクッキーＢの現在の値を、「クッキーＡの値：」「クッキーＢの値：」の右横にそれぞれ表示する。

ソースコード

JavaScript

<script type="text/javascript">
function setCookie( $cookieName, $cookieValue, $days ){
    var $dateObject = new Date();
    $dateObject.setTime( $dateObject.getTime() + ( $days*24*60*60*1000 ) );
    var $expires = "expires=" + $dateObject.toGMTString();
    document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}

function getCookie( $cookieName ){
    var $cookies = document.cookie.split(';');
    for( var $i=0; $i < $cookies.length; $i++ ){
        var $cookie = $cookies[$i].trim().split( '=' );
        if( $cookie[0] == $cookieName ){
            return $cookie[1];
        }
    }
    return "";
}

function deleteCookie( $cookieName ){
    document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

function displayCookie( $cookieName, $output ){
    var $cookieValue = getCookie( $cookieName );
    document.getElementById( $output ).innerHTML = $cookieValue;
}
</script>

HTML

<p>
    クッキーＡにセットする値：
    <button onclick="setCookie( 'cookieA-name', 'リンゴ', 1 );">リンゴ</button>
    <button onclick="setCookie( 'cookieA-name', 'バナナ', 1 );">バナナ</button>
</p>
<p>
    クッキーＢにセットする値：
    <button onclick="setCookie( 'cookieB-name', 'サッカー', 1 );">サッカー</button>
    <button onclick="setCookie( 'cookieB-name', '野球', 1 );">野球</button>
</p>
<p>
    削除：
    <button onclick="deleteCookie( 'cookieA-name' );">クッキーＡ</button>
    <button onclick="deleteCookie( 'cookieB-name' );">クッキーＢ</button>
</p>
<p>
    <button onclick="displayCookie( 'cookieA-name', 'cookieA-output' );displayCookie( 'cookieB-name', 'cookieB-output' );">クッキーの値を表示</button>
</p>
<p>
    クッキーＡの値：<span id="cookieA-output"></span>
</p>
<p>
    クッキーＢの値：<span id="cookieB-output"></span>
</p>

解説

JavaScript

<script type="text/javascript">

// クッキーを設定する関数
function setCookie( $cookieName, $cookieValue, $days ){

    // Dateオブジェクトを生成
    var $dateObject = new Date();

    // クッキーの有効期限を示すDateオブジェクトを生成
    $dateObject.setTime( $dateObject.getTime() + ( $days*24*60*60*1000 ) );

    // 有効期限をグリニッジ標準時に変換
    // 有効期限をクッキーに設定するための文字列を、変数「$expires」に代入
    var $expires = "expires=" + $dateObject.toGMTString();

    // 有効期限付きでクッキーを設定
    document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}

// クッキーを取得する関数
function getCookie( $cookieName ){

    // 「;」区切りで分割し、配列「$cookies」に格納
    var $cookies = document.cookie.split(';');

    // クッキーの数だけループ
    for( var $i=0; $i < $cookies.length; $i++ ){

        // クッキーを「=」区切りで分割し、配列「$cookie」に格納
        var $cookie = $cookies[$i].trim().split( '=' );

        // クッキー名が仮引数「$cookieName」と同じであれば値を返す
        if( $cookie[0] == $cookieName ){
            return $cookie[1];
        }
    }
    return "";
}

// クッキーを削除する関数
function deleteCookie( $cookieName ){

    // 過ぎた有効期限を設定することで削除できる
    document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

// クッキーデータを表示する関数
function displayCookie( $cookieName, $output ){

    // 仮引数「$cookieName」のクッキーの値を取得し、変数「$cookieValue」に格納
    var $cookieValue = getCookie( $cookieName );

    // 変数「$cookieValue」に格納したクッキーの値を表示
    document.getElementById( $output ).innerHTML = $cookieValue;
}
</script>

スポンサード リンク

カテゴリー: JavaScript, クッキー, 逆引き パーマリンク