中学受験専門 理科総合研究所 −理総研−
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）が発生したなら、
|
|
//単一データの保存
$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
<!--- 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>
//単一データの場合
//（Ａ）部分の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>
|
