cookie是 存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的 多个网页,但不能跨越多个域名使用。 不同的浏览器对cookie的实现也不一样,但其性质是相同的。例如在Windows 2000以及Windows xp中,cookie文件存储于documents and settings/userName/cookie/文件夹下。通常的命名格式为:userName@domain.txt 。
cookie是用来识别用户,每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点。同时加入了一些限制确保cookie不会被恶意使用,同时不会占据太多磁盘空间,每个域的cookie总数是有限制的。 IE6 每个域名最多20个cookie ; IE7以及 以上的版本 和 Firefox 浏览器 限制每个域最多50个,Oprea限制每个域最多30多个,Safari 和 Chrome没有硬件规定。
cookie的成分: 名称,值,域,路径,失效时间,安全标志。
它可以用于以下几种场合。
1、 保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个 月、一年等。
2、 跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了 cookie后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便。
3、定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。
4、创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样,在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品,方便随时进行比较。
当然,上述应用仅仅是cookie能完成的部分应用,还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。
下面一段代码是对cookie的设置,获取以及删除操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
//hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie(如果这个cookie存在)。 function setCookie(name, value, hours, path) { var name = escape(name);//escape() 来编码字符串:就把name编码成%3F%21%3D%28%29%23%25%26这种格式,以便在所有的计算机上读取该字符串 var value = escape(value); var expires = new Date(); expires.setTime(expires.getTime() + hours * 3600000); path = path == "" ? "" : ";path=" + path; _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString(); document.cookie = name + "=" + value + _expires + path; } // 获取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) { // 如果pos值为-1则说明搜索"version="失败 var start = pos + name.length; // cookie值开始的位置 var end = allcookies.indexOf(";", start); // 从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 if (end == -1) end = allcookies.length; // 如果end值为-1说明cookie列表里只有一个cookie var value = allcookies.substring(start, end); // 提取cookie的值 return unescape(value); // 对它解码 } else return ""; // 搜索失败,返回空字符串 } // 删除cookie function deleteCookie(name, path) { var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "=" + ";expires=" + expires.toUTCString() + path; }
|
具体实例:用户登录勾选记住密码的一个效果
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>