javascript cookieの実例

36297 ワード

クッキーはユーザのハードディスクに保存されたファイルで、このファイルは通常ドメイン名に対応しています.ブラウザがこのドメイン名に再度アクセスすると、このクッキーを利用できます.したがって、cookieは一つのドメイン名の下の複数のウェブページにまたがることができますが、複数のドメイン名を越えて使用することはできません.cookieに対するブラウザの実装は異なるが、その性質は同じである.例えば、Windows 2000およびWindows xpでは、クッキーファイルは、documents and settings/userName/cookie/フォルダの下に格納されている.通常の命名フォーマットは、[email protected]である.
クッキーは、ユーザを識別するために使用され、ブラウザを介して同じコンピュータがあるページを要求するたびに、このクッキーを送信します.JavaScriptを使ってクッキーの値を作成し、取り戻すことができます.
クッキー機構は、情報をユーザハードディスクに記憶するので、グローバル変数として利用できることが最大の利点である.同時にいくつかの制限を加えて、クッキーが悪意的に使用されないことを保証します.ディスク領域が多すぎることなく、各ドメインのクッキー総数に制限があります.IE 6ドメイン名あたり最大20個のクッキー;IE 7及び以上のバージョンとFirefoxブラウザは各ドメインの最大50個を制限し、Opreaは各ドメインの最大30個を制限し、SafariとChromeはハードウェア規定がない.
cookieの成分:名称、値、ドメイン、パス、失効時間、安全標識.
これは以下のいくつかの場合に使用できます. 
1、ユーザ登録状態を保存します.例えば、ユーザーIDをクッキーに格納し、このようにユーザが次のページにアクセスすると再登録する必要がなくなり、多くのフォーラムやコミュニティがこのような機能を提供している.クッキーは有効期限を過ぎたら自動的に消えます.そのため、システムはユーザーにログイン状態を維持する時間を促すことができます.よくあるオプションは一ヶ月、三ヶ月、一年などがあります. 
2、ユーザーの行為をフォローする.例えば、天気予報サイトは、ユーザーが選択した地域によって現地の気象状況を表示することができる.毎回所在地を選ぶのが煩雑なら、クッキーを利用すると人間的になります.前回訪問した地域を覚えておいて、次のページを開くと、自動的に前回のユーザーがいる地域の天気が表示されます.すべてはバックグラウンドで行われますので、このようなページはユーザーのためにカスタマイズされたように使いやすいです.
3、カスタマイズページ.ウェブサイトが肌の交換やレイアウトを変更する機能を提供している場合、例えば背景色、解像度などのユーザーのオプションを記録するためにクッキーを使用することができる.ユーザーが次に訪問するときは、前回の訪問のインターフェーススタイルを保存することができます.
4、カートを作ります.前の例では、クッキーを使用して、ユーザが購入したい商品を記録するように、会計時に一括して提出することができます.例えばタオバオネットはクッキーを使ってユーザーが見た商品を記録しています.いつでも比較しやすいです.
もちろん、上記のアプリケーションはクッキーでしかできない部分的なアプリケーションであり、グローバル変数を必要とする機能がもっと多いです.クッキーの欠点は主に安全性とプライバシー保護に集中しています.
 
次のコードはクッキーの設定を取得し、削除します.
//  cookie

	//hours      ,cookie            。hours   0 ,         cookie,  cookie           、 path cookie(    cookie  )。

	function setCookie(name,value,hours) {

		var name = escape(name);

		var value = escape(value);

		var expires = new Date();

		expires.setTime(expires.getTime() + hours*3600000);

		_expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString(); 

		document.cookie = name + "=" +value + _expires ;	

	}

	//  cookie

	function getCookieValue(name) {

		var name = escape(name);

		// cookie  ,         cookie  

		var allcookies = document.cookie;

		//    name cookie       

		name += "=";

		var pos = allcookies.indexOf(name);

		//           cookie,           

		if(pos != -1 ) { 

			var start = pos + name.length; 

			var end = allcookies.indexOf(";", start);

			if (end == -1) end = allcookies.length; 

			var value = allcookies.substring(start,end);

			return unescape(value);

			

		} else return "";

			

	}

	//  cookie

	function deleteCookie(name){  

		var name = escape(name);

		var expires = new Date(0);



		document.cookie = name + "="+ ";expires=" + expires.toUTCString() ;  

	}

 具体例:ユーザ登録チェックパスワードを覚える効果を選択します.
  1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>login</title>
5 </head>
6 <body>
7
8 <form>
9<input type="text" id="username"/><br/>
10<input type="passwd" id="pwd"/><br/>
11 <input type="checkbox" id = "rempwd" checked=""/>
12 <input type="button" value=" " id="btn"/>
13 </form>
14 <script type="text/javascript">
15 window.onload =function() {
16
17 var btn = DocGetId("btn");
18
19 btn.onclick =function() {
20 var rempwd = DocGetId("rempwd");
21 var userName = DocGetId("username").value, pwd = DocGetId("pwd").value;
22 if(rempwd.checked){
23 setCookie(userName,userName,2);
24 setCookie(userName+"_pwd",pwd,2);
25 //alert(userNameValue +"|"+passwordValue)
26 }
27 else{
28 deleteCookie(userName);
29 deleteCookie(pwd);
30 }
31 checkLogin(userName, pwd);
32 }
33
34 DocGetId("username").onblur =function() {
35 var user = DocGetId("username").value;
36 var userNameValue = getCookieValue(user);
37 var passwordValue = getCookieValue(user+"_pwd");
38 if( userNameValue == user) {
39 DocGetId("pwd").value = passwordValue;
40 }
41 }
42
43 }
44 function DocGetId(id) {
45 return document.getElementById(id);
46 }
47 function checkLogin(str1,str2) {
48 //var reg = /^[A-Za-z0-9]+{3,21}$/;
49 var reg=/[(\¥)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/ ;
50
51 if(str1 ==""|| str1 ==null) {
52 alert(" ");
53 returnfalse;
54 }elseif(reg.test(str1)){
55 alert(" ");
56 returnfalse;
57 } elseif(str2 ==""|| str2 ==null) {
58 alert(" ");
59 returnfalse;
60 }
61 else {
62 alert(" ");
63 returntrue;
64 }
65 }
66
67 // cookie
68 //hours ,cookie 。hours 0 , cookie, cookie 、 path cookie( cookie )。
69 function setCookie(name,value,hours) {
70 var name = escape(name);
71 var value = escape(value);
72 var expires =new Date();
73 expires.setTime(expires.getTime() + hours*3600000);
74 _expires = (typeof hours) =="string"?"" : ";expires="+ expires.toUTCString();
75 document.cookie = name +"="+value + _expires ;
76 }
77 // cookie
78 function getCookieValue(name) {
79 var name = escape(name);
80 // cookie , cookie
81 var allcookies = document.cookie;
82 // name cookie
83 name +="=";
84 var pos = allcookies.indexOf(name);
85 // cookie,
86 if(pos !=-1 ) {
87 var start = pos + name.length;
88 var end = allcookies.indexOf(";", start);
89 if (end ==-1) end = allcookies.length;
90 var value = allcookies.substring(start,end);
91 return unescape(value);
92
93 } elsereturn"";
94 }
95 // cookie
96 function deleteCookie(name){
97 var name = escape(name);
98 var expires =new Date(0);
99
100 document.cookie = name +"="+";expires="+ expires.toUTCString() ;
101 }
102
103 </script>
104 </body>
105 </html>