javascript cookie实例

======================================================
注：本文源代码点此下载
======================================================

cookie是 存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的 多个网页,但不能跨越多个域名使用。 不同的浏览器对cookie的实现也不一样,但其性质是相同的。例如在windows 2000以及windows xp中,cookie文件存储于documents and settings/username/cookie/文件夹下。通常的命名格式为:[e-mail] 。

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^)/