cookieでカウンター

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

Counter :

再読込する毎にカウンターが増えます。

例文

Counter : <span id="countnumber"></span>

<script type="text/javascript">
counter();

function counter() {
	var c_name,count;
	//cookie名
	c_name = "cookie_count";

	//cookieの読込
	count = loadCookie(c_name);
	if (count == "") {
		//データがない場合
		count = 1;
	} else {
		//データがある場合
		count++;
	}

	//countを表示
	document.getElementById("countnumber").innerHTML = count;
	
	//cookieの保存
	saveCookie(c_name,count,60);
}

//cookie読込
function loadCookie(c_name) {
	var s,n,m,c_data;
	//cookieの読み込み
	c_data = document.cookie;
	//cookie名
	c_name = c_name + "=";
	//有効なcookie名を調べる
	n = c_data.indexOf(c_name,0);
	if (n > -1) {
		//cookieのデータ部分を取り出す
		m = c_data.indexOf(";",n + c_name.length);
		if (m == -1) m = c_data.length;
		s = c_data.substring(n + c_name.length,m);
		//デコード
		return unescape(s);
	} else {
		return "";
	}
}

//cookie保存
function saveCookie(c_name,c_data,c_day) {
	var n,c_date,c_limit;
	//有効期限
	c_date = new Date(); 
	n = c_date.getTime() + (1000*60*60*24*c_day);
	c_date.setTime(n); 
	c_limit = c_date.toGMTString();
	//cookieの書き出し
	document.cookie = c_name + "=" + escape(c_data) + "; expires=" + c_limit;
}
</script>

解説

ページを開くとカウンターが処理され訪問回数を記録して表示します。
ブラウザでリロード（再読込）してカウンターが増えることを確認してください。カウントが１つづつ増えていくはずです。

ユーザー関数を３つに分けて処理を分担させています。
1つめのcounterで、カウントが増える処理を、その中からloadCookieとsaveCookieを呼び出してcookieの読込と保存を行っています。

ユーザー関数counter

流れを簡単に見てみましょう。
まず、cookie名を決めて変数c_nameに入れています。
次にcookieを読み込んで、変数countに入れます。その次に、変数countが空なら「1」を、そうでなければ1を足しています。
あとは、画面に変数countを表示し、変数countをcookieに保存しています。

ユーザー関数loadCookie

これはcookieを読み込む処理を１つにまとめたものです。
このユーザー関数にcookie名を引数として渡すと、そのcookieを探して中の文字列を返しています。有効なcookieが見つからない場合は、空の文字列を返します。

ユーザー関数saveCookie

こちらもcookieを保存する処理を１つにまとめています。
引数としてcookie名、保存する内容（文字列）、期限日数を与えることで、cookieを適切に保存しています。

戻る