======================================================
注:本文源代码点此下载
======================================================
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>logintitle>
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">
15window.onload =function() {
16
17 var btn = docgetid("btn");
18
19btn.onclick =function() {
20 var rempwd = docgetid("rempwd");
21 var username = docgetid("username").value, pwd = docgetid("pwd").value;
22 if(rempwd.checked){
23setcookie(username,username,2);
24setcookie(username+"_pwd",pwd,2);
25 //alert(usernamevalue +"|"+passwordvalue)
26}
27 else{
28deletecookie(username);
29deletecookie(pwd);
30}
31checklogin(username, pwd);
32}
33
34docgetid("username").onblur =function() {
35 var user = docgetid("username").value;
36 var usernamevalue = getcookievalue(user);
37 var passwordvalue = getcookievalue(user+"_pwd");
38 if( usernamevalue == user) {
39docgetid("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) {
52alert("请您先填写用户名");
53 returnfalse;
54}elseif(reg.test(str1)){
55alert("用户名不能为非法字符");
56 returnfalse;
57} elseif(str2 ==""|| str2 ==null) {
58alert("密码不能为空");
59 returnfalse;
60}
61 else {
62alert("弄对了");
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();
73expires.settime(expires.gettime() + hours*3600000);
74_expires = (typeof hours) =="string"?"" : ";expires="+ expires.toutcstring();
75document.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的开始位置
83name +="=";
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
100document.cookie = name +"="+";expires="+ expires.toutcstring() ;
101}
102
103 script>
104 body>
105 html>
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/