1.概念：网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密） 2.为什么要有cookie：我们用变量存储数据在关闭页面时会销毁。如果我们需要一段时间内保存数据，但又不至于使用后端数据库去存储的东西就可以用cookie来存储。例如，当用户访问了某个网站时，我们就可以通过cookie来向访问者电脑上储存数据。 3.注意： A.不同的浏览器存放的cookie位置不同，不能通用。 B.cookie的存储是以域名的形式区分的。 C.cookie的数据可以设置名字。 D.一个域名下存放的cookie的个数是有限制的。 E.每个cookie存放的内容大小也有限制。
4.cookie的存储方式
document.cookie = 'username = liang ';//可读可写 注意：A.在IE和FF下可以使用，而chrome里禁止本地使用； B.通过 document.cookie 获取当前网站的cookie时，得到的是字符串形式的值，包含当前网站下所有cookie，不同的值用分号+空格分开； C.如果我们想长时间存放一个cookie，需要在设置它的时候同时设置一个过期事件 document.cookie = 'username=liang;expires='+时间 ，这个时间必须是字符串，默认是临时存储，例如 oDate.setDate(oDate.getDate()+5) D.上述方法在IE里可能会有问题，用oDate.toGMTString()转成日期字符串就好了。 E.内容最好编码存放，encodeURL(); 例如， alert(encodeURL('你好\n你好'))； 得到的值再用alert（decodeURL('得到的值')）弹出 5.接下来封装设置cookie、获取cookie（只获取有用值而不是全部）、删除cookie的方法。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <script> document.cookie = 'usename=wei'; document.cookie = 'id=1'; document.cookie = 'sex=男'; setCookie('usename','wei',30); function setCookie(key,value,t){ var oDate = new Date(); oDate.setDate(oDate.getDate()+t); document.cookie=key+'='+value+';expires='+oDate.toGMTString(); } function getCookie(key){ var arr1 = document.cookie.split('; '); for(var i=0;i<arr1.length;i++){ var arr2 = arr1[i].split('='); if(arr2[0]==key){return decodeURI(arr2[1]); } }} alert(getCookie('id')); function removeCookie(key){ setCookie(key,'',-1); } removeCookie('usename'); </script> </body> </html> 练习4：做一个表单，包含一个输入框一个提交和一个删除按钮，点击提交的时候把username的内容保存在cookie里，每当打开该页面时判断一下如果getcookie(‘username’)存在就在自动把用户名输入进去，点击删除按钮时，把这个cookie和输入框的内容全部删除 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #btn1,#btn2{cursor:pointer;} </style> </head> <body> <input type="text" id="text1" placeholder="请输入内容" /> <button id="btn1">提交</button> <button id="btn2">删除cookie</button> <script> var oText=document.getElementById("text1"); var oBtn1=document.getElementById("btn1"); var oBtn2=document.getElementById("btn2"); oBtn1.οnclick=function(){ if(oText.value!=''){ setCookie('username',oText.value,30); } alert(getCookie('username')); } oBtn2.οnclick=function(){ removeCookie('username'); alert(getCookie('username')); oText.value=''; } window.οnlοad=function(){ if(getCookie('username')!=null&&getCookie('username')!=''){ alert("1"+getCookie('username')); oText.value=getCookie('username'); }else{ oText.value=''; } } function setCookie(key,value,t){ var oDate = new Date(); oDate.setDate(oDate.getDate()+t); document.cookie=key+'='+value+';expires='+oDate.toGMTString(); } function getCookie(key){ var arr1 = document.cookie.split('; '); for(var i=0;i<arr1.length;i++){ var arr2 = arr1[i].split('='); if(arr2[0]==key){return decodeURI(arr2[1]);} } } function removeCookie(key){ setCookie(key,'',-1); } </script> </body> </html>
