|
|
|
09/19(Thu) 08:34
 クッキー入門(仕組みと関数の使い方)
クッキーを使うと、訪問者個別のデータを訪問者のブラウザに記録することができます。例えば「ページに来てくれた個人別の回数」を記録しておけば、全体のアクセス数だけでなく個人別のアクセス数を表示させることができます。
このようにクッキーを使うと、今までよりもさらに個人別に対応したページを作ることができるようになります。
■ 応用例
- 個人別アクセス数の表示
- 前回の訪問後ページが更新されてるかの判定
- 個人別 What's New
- 掲示板、チャットなどの個人情報(メール、URLなど)の記録
■ クッキーの仕組み
これからの説明は、当ページで使ってるsetCookieData、GetCookie、DeleteCookieのクッキー関数をベースに説明しています。他の関数をお使いの場合は、パラメータ等異なる場合がありますのでご注意ください。
| クッキー名 | あなた固有のクッキー名を決めます。他の人のクッキーとダブらないような名前にします。私のページでは、tkiku_cookie にしています。
(注)以下、説明の都合上クッキー名をtkiku_cookieとして説明しますが、あなたの付けたクッキー名が例えばyamada_userならtkiku_cookieをyamada_userに書き換えて使用します。 |
| フォーマット | クッキー名=項目名1:内容1,項目名2:内容2,項目名3:内容3...; expires=消去日
(注)実際のフォーマットは下の出力例参照 |
| クッキーの読込 | GetCookie("クッキー名") |
| クッキーの記録 | setCookieData("項目名1:"+ 内容1 +",項目名2:"+ 内容2 +",項目名3:"+ 内容3 +"・・・・)
(注)クッキー名、消化日は関数内で自動設定されます。パラメータの内容はフォーマットの右辺から消去日除いたものと同じです。 |
| クッキーの削除 | DeleteCookie("クッキー名") |
当ページで設定してるクッキーの項目名と内容です。(下のテーブル内の値はdocument.cookieを使って実際の値を表示したものです)
| 項目名 | 内容 |
|---|
| クッキー名 | tkiku_cookie |
| count | 訪問回数 |
| first | 初回訪問日 |
| last | 前回訪問日 |
| lastp | 前々回訪問日 |
■ 一般的なクッキーの処理方法
クッキーが未登録でないかを調べ、未登録(初回)なら初期値を設定します。登録済(2回目以降)なら2回目以降の処理をします。GetCookieは未登録ならnullを返します。
|
<![CDATA[
get_data = GetCookie("tkiku_cookie")
if (get_data == null){
#未登録の時、初期値セット
} else {
#2回目以降の処理をする
}
]]>
|
■ 具体的なクッキー処理
|
<![CDATA[
if (get_data == null) { // 初回訪問初期値セット
count = 1; //訪問回数
first = today; //初訪問日
last = today; //前回訪問日
lastp = "0000/00/00"; //前々回訪問日
} else { // ２回目以降クッキーを項目に分解
var pairs = new Array(),values = new Array(),str = new Array();
pairs = get_data.split(",");
for (i = 0; i < pairs.length; i++) {
str = pairs[i].split(":");
values[i] = str[1];
}
count = values[0];
first = values[1];
last = values[2];
lastp = values[3];
if (last != today) {
count++; //カウンター更新
lastp = last; //前回訪問日更新
}
}
]]>
|
■ クッキー関数とその説明
クッキー処理をするのに必要な関数の動作を説明します。この関数は幕の内弁当さんから頂きました。
■ クッキー名 tkiku_cookie に、data の内容を記録する関数
クッキーを記録するときに、必要な設定値は次の２つです。
（１）クッキー名を決める。（例えば "tkiku_cookie"）
（２）有効期限を決める（例えば１ヶ月）
- クッキー名----６行目：SetCookie ("tkiku_cookie", data, expdate);のtkiku_cookieをあなたのクッキー名に書き換えて使います。
- 消去日の設定--５行目：24 * 60 * 60 * 1000 * 30 * 1の値を変更することで消去日を変更できます。普通は３０日が一般的です。数字の意味は24(H)*60(M)*60(S)*1000(MS)*30(Day)*1(Month)です。１５日にしたい時は30を15に、２ヶ月にしたい時は、1を2にします。
|
<![CDATA[
// クッキー名と消去日の設定は、この関数の中に指定します
function setCookieData(data)
{
var expdate = new Date ();
expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000 * 30 * 1));
SetCookie ("tkiku_cookie", data, expdate);
}
function SetCookie (name,value)
{
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + value +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
]]>
|
この関数を用意しておいて、
これで、書き込みが完了します。「書き込むデータ」の内容は上のフォーマットの項参照。
■ name で指定されたクッキー名のクッキーを読み出す関数
|
<![CDATA[
function GetCookie (name)
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal (offset)
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset,endstr));
}
]]>
|
この関数を用意しておいて、
get_data = GetCookie("tkiku_cookie")
|
これで、get_data にクッキーが代入されます。
もし、そのキーでクッキーが登録されていない場合は、
get_data の内容は、null になります。
■ name で指定されたクッキー名のクッキーを削除する関数
|
<![CDATA[
function DeleteCookie (name)
{
var exp =new Date();
exp.setTime(exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
]]>
|
この関数を用意しておいて、
DeleteCookie ("tkiku_cookie")
|
これで、削除になります。
有効日を「現在まで」として、ブラウザに削除させているのです。
|
|
