什么是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>