開発メモ：Cookieを発行する方法（配列含）とタイミング｜理総研Web＠中学受験専門理科総合研究所

：ユーザー登録はコチラ：

016：Cookieを発行する方法（配列含）とタイミング

対象言語：PHP｜JavaScript / jQuery

キーワード：PHP JavaScript jQuery cookie クッキー発行保存取り出し配列オブジェクトサンプル setcookie $.cookie header

Cookieがどういうものかという説明は割愛します。またPHPではセッション（Session／$_SESSION）の話題には触れません。

ここではクライアントサイドにCookieを発行するタイミングと方法を、PHP（$_COOKIE）とJavaScript（「jQuery Cookie Plugin」を使用）の2通りについて説明します。さらに、jQuery Cookie Plugin v1.3からオブジェクト（連想配列）を扱えるようになったので、配列データの保存・取り出しについても書いてみます。

タイミングと言っても、そこに気を使わないとイケナイのはPHPだけです。もし次のようなエラー（Warning）が発生したなら、

Warning: Cannot modify header information - headers already sent by ～

それは、echo，printで何か出力された後、つまり簡単に言えばWebページのソースに何か文字が記述された後にsetcookie関数が呼び出されたコトを表しています。setcookie関数はHTMLタグや空白も含めて、あらゆる出力よりも先に呼び出す必要があります。

この辺りの融通の効かなさはPHPが持つセキュリティ意識から来ているので、どうしても出力後にCookieを発行したい場合（おそらくそれはAjax的な非同期通信だったり、PHPでHTMLヘッダを改変したりする場合）には、JavaScriptで実現するしかありません。

PHPの場合はあらゆる出力の前に次のように発行・保存します。Cookieデータの呼び出しについてはその限りではありません。

//単一データの保存
$timeout = time() + 7 * 24 * 3600;    //UNIXタイムスタンプで7日間の有効期限
setcookie("test_1", "data_1", $timeout);
 
// その呼び出し
if (isset($_COOKIE['test_1'])) {
    echo $_COOKIE['test_1'];
}
 
//出力>> data_1

//配列データの保存
$timeout = time() + 20 * 3600;    //UNIXタイムスタンプで20時間の有効期限
setcookie("test_2[iti]", "Fuji", $timeout);   //配列の体ではあるものの、個々に
setcookie("test_2[ni]", "Taka", $timeout);    //Cookieなわけで、有効期限や
setcookie("test_2[san]", "Nasubi", $timeout); //削除などは個々に設定・実行。
 
// その呼び出し
if (isset($_COOKIE['test_2'])) {
  foreach ($_COOKIE['test_2'] as $key => $value) {
    echo $key . "：" . $value . "\n";
  }
}
 
//出力>> iti：Fuji
//出力>> ni：Taka
//出力>> san：Nasubi

JavaScriptの場合は、まずHTMLヘッダ内にjQueryとjQuery Cookie Pluginの読み込みがこの順で必要です。最新版のjQuery Cookie Pluginは、 github.com 内の［ jquery.cookie.js ］から入手して下さい。

<!--- HTMLヘッダ --->
<head>
    //・・・
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/jquery.cookie.1.3.js"></script>
    <script type="text/javascript">
        <!--- （Ａ）ここにJavaScriptの処理を書き加える。 --->
    </script>
    //・・・
</head>
<body>
    <!--- （Ｂ）ここにテスト用のHTMLコードを書き加える。 --->
</body>

ここでは、id="cook_3"またはid="cook_4"を持つボタンがクリックされたときのアクションとしてCookieを発行します。jQuery Cookie Pluginの「$.cookie.json = true;」は、配列を扱うときのみ指定します。

//単一データの場合
//（Ａ）部分のJavaScript
$(document).ready(function() {
 
    //Cookieがある場合は呼び出して表示。
    $("#hyouji_3").html($.cookie("test_3"));
 
    //「data_3保存」をクリックすることでCookieに保存
    $("#cook_3").click(function(){
 
        $.cookie('test_3', $("#input_3").val(), {expires: 1});  //有効期限1日
    });
});
 
//（Ｂ）部分のHTMLコード
<input type="hidden" id="input_3" value="data_3" />
<input type="button" id="cook_3" value="data_3保存" />
<div id="hyouji_3"></div>

//オブジェクト（連想配列データ）の場合
//（Ａ）部分のJavaScript
$(document).ready(function() {
 
    $.cookie.json = true;   //配列を扱う宣言
 
    //Cookie内のJSON形式の配列は自動的にオブジェクトに変換
    var data_obj = $.cookie("test_4");
 
    for (key in data_obj) {
        $("#hyouji_4").append(key + ":" + data_obj[key] + "\\n");
    }
 
 
    //「data_4保存」をクリックすることでCookieにオブジェクトを保存
    $("#cook_4").click(function(){
 
        data_obj = {};
 
        //オブジェクトを生成
        for (i=1;i<=3;i++) {
            data_obj[$("#input_4_"+i).attr("name")] = $("#input_4_"+i).val();
        }
 
        //オブジェクトを自動的にJSON形式の配列に変換
        $.cookie('test_4', data_obj);
    });
});
 
//（Ｂ）部分のHTMLコード
<input type="hidden" id="input_4_1" name="iti" value="Fuji" />
<input type="hidden" id="input_4_2" name="ni" value="Taka" />
<input type="hidden" id="input_4_3" name="san" value="Nasubi" />
<input type="button" id="cook_4" value="data_4保存" />
<div id="hyouji_4"></div>

以下は実働サンプルです。それぞれボタンをクリックするとCookieが発行されます。その後リロードすると、Cookieのデータがボタンの下に表示されます。多分。

著者 You Mizuguchi

Name：
Pass：

中学受験専門 理科総合研究所 －理総研－

016：Cookieを発行する方法（配列含）とタイミング

中学受験専門　理科総合研究所　－理総研－