1 <script>
2 /* 什么是cookie
3 页面中用来保存信息：比如，自动登录、记住用户名
4
5 cookie的特性：cookie是以域名为单位的，同一个网站(即同一个域名)中所有页面共享一套cookie。 cookie的数量和大小是有限制的。 cookie有过期时间限制。
6
7 JS中使用cookie的方法: document.cookie
8
9 在本地浏览器中，只有firefox浏览器才能把cookie保存下来。IE和chrome是不保存的cookie的。
10
11 cookie就是document上的一个属性
12
13 cookie的使用
14 设置cookie： 名字=值，属性(不同名字)之间不会覆盖。
15 过期时间： expires=时间, 日期对象的使用
16 封装成函数
17
18 读取cookie： 字符串分割
19
20 删除cookie： 已过期的cookie
21 */
22
23 /*设置cookie的值*/
24 //document.cookie='user=ygl'; /*在js中'='代表赋值，而在cookie中'='代表添加 */
25 //document.cookie='pass=123456'; /*如果不设置cookie的过期时间，那么等浏览器关闭，cookie的值就自动清除了 */
26 //alert('ygl'+document.cookie);
27
28 /* 设置cookie的过期时间 */
29 /* 用Date()对象获取日期的相关属性值： */
30 var oDate=new Date();
31 //oDate.setDate(); /* setDate并不是设置系统时间，而是设置oDate对象内部的时间。如果给的日期超出了这个月最大的容量，设置的值将会自动转到下一月 。 */
32 //oDate.setDate(30);
33 //oDate.setDate(oDate.getDate()); /* 利用刚才的特性，将获取到的当前日期oDate.getDate() 赋给oDate.setDate()并且加上n天，就可以获取到n天以后的日期。*/
34 //alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate());
35 oDate.setDate(oDate.getDate()+1); /* 设置cookie1天后过期 */
36 //document.cookie='user=youmeili; expires='+oDate; /* 指定cookie过期的属性为：expires， expires是系统内部的状态，不会在页面中弹出来。 */
37 //alert(document.cookie);
38
39 /* 封装设置cookie的函数 */
40 function setCookie(name,value,iDay){
41 var oDate=new Date();
42 oDate.setDate(oDate.getDate()+iDay);
43 document.cookie=name+'='+value+';expires='+oDate;
44 }
45 setCookie('userName','meili',1); /*在这里设置cookie的名字为userName,当需要获取或删除cookie的值时，传的参数应该和这里相同。*/
46
47 /*获取cookie的值*/
48 function getCookie(name){
49 var arr=document.cookie.split('; '); /* 将cookie的值，切分成数组。 [userName=meili,pass=123456] */
50 for(var i=0; i<arr.length;i++){
51 var arr2=arr[i].split('='); /* 将数组再做一次拆分 [userName,meili]，切一次，判断一次。(先拆，拆完在比较。) */
52 if(arr[2]==name){
53 return arr[1]
54 }
55 }
56 return ''; /* 整个循环结束了，还是没找到，就返回一个空字符。 */
57 }
58 alert(getCookie('userName'));
59
60 /* 删除cookie */
61 function removeCookie(name){
62 setCookie(name,1,-1); /*在删除cookie的函数中，设置cookie，并设置cookie的过期时间为-1天。*/
63 }
64 removeCookie('userName');
65
66
67 /* 使用cookie 记录上次登录的用户名 */
68 /*
69 用户登录时：将用户名、密码存进cookie
70 重新打开页面时onload:从cookie中读取用户名
71 */
72 window.onload=function(){
73 var oForm=document.getElementById('form1');
74 var oUser=document.getElementsByName('user')[0];
75 var oPass=document.getElementsByName('pass')[0];
76 oForm.onsubmit=function(){
77 setCookie('user',oUser.value,1);
78 };
79 oUser.value=getCookie('user');
80 };
81 </script>
1 <body>
2 <form id="form1" action="http://www.baidu.com">
3 用户名：<input type="text" name="user"/><br/>
4 密 码：<input type="password" name="pass"/> <br/>
5 <input type="submit" value="登录"/>
6 </form>
7 </body>
