第十七节 Cookie基础与应用

什么是cookie：其实就是页面用来保存信息：比如，自动登录、记住用户名

cookie的特性：（以域名为单位的）

　　同一个网站（同一个域名）中所有页面共享一套cookie

　　数量、大小有限，跟浏览器有关，数量一般不超过50条，大小一般在4K-10K不等

　　有过期时间，什么时候过期，这个时间是由程序员设定的，如有些登录窗口会有“复选框：两周内自定登录”

JS中使用cookie，其实cookie只是document下面的一个属性，即document.cookie，如下cookie的使用

　　其中在“火狐”浏览器下，我们可在登录页面“右击空白”——查看页面信息——查看cookie——

　　设置cookie

　　　　① 格式：名字=值

　　　　② 设置多个cookie不会被覆盖，但是当我们设置的cookie名字相同时，后者的内容会把前面设置的内容覆盖掉

　　　　③ 过期时间：expires=时间，不设置时间时，浏览器关闭后，cookie就没了，其中expires表示有效期限，失效日期

　　　　　　日期对象的使用　　

 1 <script>
 2     //日期对象的使用
 3     var oDate = new Date();
 4 
 5     // oDate.setDate(29);  //设置“日”，因为现在为2019年2月，只有28天，所以返回“2019-3-1”
 6     //我们可以用上述方法给cookie添加过期时间，加入我们想让它两周以后过期则如下：
 7     oDate.setDate(oDate.getDate()+14);
 8     // alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+(oDate.getDate()));
 9     document.cookie = 'user=haha; expires='+oDate;    //其中 expires='+oDate 这部分内容并不会出现在弹出的窗口里
10 
11     // document.cookie = 'user=haha';      //此时“=”不表示赋值，而表示添加
12     // document.cookie = 'password=123456';    //所以本句内容并不会把上面一句覆盖掉
13     alert(document.cookie);
14 </script>

　　把cookie封装成函数，方便之后使用：

1 //把cookie封装成函数
2 function setCookie(name, value, iDay) {
3     var oDate=new Date();
4     oDate.setDate(oDate.getDate()+iDay);
5     document.cookie=name+'='+value+';expires='+oDate;
6 }
7 setCookie('username', 'hahha', 365);

　　读取cookie：字符串分割

 1 function getCookie(name) {
 2     var arr = document.cookie.split('; ');    //cookie的字段之间用“; ”分割开
 3 
 4     for (var i = 0; i < arr.length; i++) {
 5         var arr2 = arr[i].split('=');
 6 
 7         if (arr2[0] == name) {
 8             return arr2[1];
 9         }
10     }
11     return '';
12 }
13 alert(getCookie('username'));     //返回hahha，匹配成功，正确输出

　　删除cookie：已经过期的cookie自动删除

1 //删除cookie
2 function removeCookie(name) {
3     setCookie(name, 1, -1);
4 }
5 removeCookie('user');

应用实例：

　　用cookie记录上次登录的用户名

　　　　提交时——记录用户名

　　　　window.onload——读取用户名

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>记住上一次登录的用户名</title>
 6     <script>
 7         //用户登录时，把用户名存进cookie，页面onload加载时读取“用户名”
 8         window.onload = function () {
 9             var oForm = document.getElementById('form_1');
10             var oUser = document.getElementsByName('user')[0];
11 
12             //用户登录时，把用户名存进cookie
13             oForm.onsubmit = function () {
14                 setCookie('user', oUser.value, 14);    //14天后过期
15             };
16 
17             //页面onload加载时读取“用户名”
18             oUser.value = getCookie('user');
19         };
20 
21         //把cookie封装成函数
22         function setCookie(name, value, iDay) {
23             var oDate=new Date();
24             oDate.setDate(oDate.getDate()+iDay);
25             document.cookie=name+'='+value+';expires='+oDate;
26         }
27         // setCookie('username', 'hahha', 365);
28         // alert(document.cookie);
29 
30         //读取cookie
31         function getCookie(name) {
32             var arr = document.cookie.split('; ');    //cookie的字段之间用“; ”分割开
33 
34             for (var i = 0; i < arr.length; i++) {
35                 var arr2 = arr[i].split('=');
36 
37                 if (arr2[0] == name) {
38                     return arr2[1];
39                 }
40             }
41             return '';
42         }
43         // alert(getCookie('username'));
44 
45         //删除cookie
46         function removeCookie(name) {
47             setCookie(name, 1, -1);
48         }
49     </script>
50 </head>
51 <body>
52 <form id="form_1" action="http://www.baidu.com/">
53     用户名：<input type="text" name="user"/><br/>
54     密码：<input type="password" name="pass"/><br/>
55     <input type="submit" value="登录"/>
56 </form>
57 </body>
58 </html>

View Code