cookieで名前を表示

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

戻る

実例

例文

<form name="form_name">
名前：<input type="text" name="your_name">　<input type="button" value="登録" onClick="set_cookie()">
</form>

<script type="text/javascript">
//名前を読込
function load_name() {
	var c_name,yourname;
	//cookie名
	c_name = "cookie_name";
	
	//cookieの読込
	yourname = loadCookie(c_name);
	if (yourname == "") {
		//データがない場合
		yourname = "no name";
	}
	
	//名前の表示
	document.form_name.your_name.value = yourname;
}

//名前を保存
function save_name() {
	var s,c_name;
	//cookie名
	c_name = "cookie_name";
	
	//フォームの内容
	s = document.form_name.your_name.value;
	
	//cookieの保存
	saveCookie(c_name,s,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>

解説

最初、フォームには「no name」と表示されています。そこにあなたの名前を入力し、登録ボタンを押してください。
次に、このページを再読込するとcookieに登録した名前が表示されます。フォーム内を消してから再読込すると分かりやすいでしょう。

処理は４つのユーザー関数に分かれています。
名前を読み込む処理、名前を保存する処理、cookieを読み込む処理、cookieを保存する処理です。

ユーザー関数load_name

cookie名を準備して、ユーザー関数loadCookieを使って保存された内容を変数yournameに読み込んでいます。
cookieになにもない場合には変数yournameの内容を「no name」にしています。
最後に変数yournameをフォームに出力します。

ユーザー関数save_name

cookie名、フォームから保存したい内容を準備して、ユーザー関数saveCookieに送っています。

ユーザー関数loadCookieとユーザー関数saveCookieについては前ページを参照してください。
このように何度も使い回しができる処理を作っておくととても便利です。cookieの読込も保存も、特定の処理と汎用的処理に分けることで、その後の使い道を考えているのです。

戻る