基本認(rèn)識(shí)：
1、cookie是頁(yè)面用來(lái)保存一些信息的凫海，比如用戶(hù)名 密碼等（自動(dòng)登錄等）
2拦键、注意：cookie和網(wǎng)頁(yè)緩存沒(méi)有任何關(guān)系，網(wǎng)頁(yè)緩存緩存的額是頁(yè)面
3毅往、特性：
（1）他是完全存在客戶(hù)端上的牵咙，是不安全的（也沒(méi)有加密什么的，只是轉(zhuǎn)了次碼）
（2）同一個(gè)網(wǎng)站共享的是一個(gè)cookie
（3）數(shù)量 大小是有限的（一般不超過(guò)50個(gè)）
（4）過(guò)期時(shí)間（不指定過(guò)期時(shí)間攀唯，在瀏覽器關(guān)閉時(shí)失效）
（5）在cookie中=以為這添加洁桌，不會(huì)覆蓋前面賦的值
4、注意侯嘀，我們存cookie時(shí)另凌，有時(shí)會(huì)默認(rèn)在key前面加個(gè)空格，這可能導(dǎo)致我們?nèi)トr(shí)戒幔，取不到值吠谢，所以在封裝回去cookie的值時(shí)，一定要注意注意下空格
代碼示例：
<head>
<meta charset="UTF-8">
<title>cookie實(shí)踐</title>
</head>
<script>
// var odate = new Date();
// //設(shè)置當(dāng)前時(shí)間+30天
// odate.setDate(odate.getDate()+30);
// alert(odate.getFullYear()+"-"+(odate.getMonth()+1)+"-"+odate.getDate())
//添加cookie并設(shè)置過(guò)期時(shí)間為當(dāng)前時(shí)間向后30天
//document.cookie="userName=jiayazi; expires="+odate;
//設(shè)置cookie封裝方法
function setCookie(name,value,expires) {
var newDate = new Date();
newDate.setDate(newDate.getDate()+expires);
document.cookie=name+'='+value+';expires='+expires;
}
//取出cookie的值
function getCookie(cookieName) {
var cookieList = document.cookie.split(';');
for(var i=0; i<cookieList.length; i++){
var oneCookieArr = cookieList[i].split('=');
var oneCookieName = oneCookieArr[0];
while (oneCookieName.charAt(0)==' ') { //判斷一下字符串有沒(méi)有前導(dǎo)空格
oneCookieName = oneCookieName.substring(1,oneCookieName.length); //有的話诗茎，從第二位開(kāi)始取
}
if(oneCookieName==cookieName){
return oneCookieArr[1];
}
}
return '';
}
//刪除cookie
function removeCookie(removeCookieName) {
setCookie(removeCookieName,' ',-1);
}
//頁(yè)面剛加載時(shí)會(huì)自定執(zhí)行該方法
window.onload=function () {
alert(document.cookie);
var form1 = document.getElementById('login');
var userName = document.getElementById('username');
form1.onsubmit=function () {
setCookie('userName',userName.value,30);
}
userName.value=getCookie('userName');
var cleanBtn = document.getElementsByTagName('a')[0];
cleanBtn.onclick=function () {
removeCookie('userName');
userName.value='';
}
}
</script>
<body>
<form id="login" action="http://www.baidu.com/">
用戶(hù)名：<input type="text" id="username"/><br/>
密 碼：<input type="password" id="password"/><br/>
<input type="submit" value="提交">
<a href="javascript:;" style="font-size: 12px"> 忘記密碼 </a>
</form>
</body>
