javascript cookie实例
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的设置，获取以及删除操作。
//新建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>
浙公网安备 33010602011771号