在說如何用cookie記錄用戶名之前，我們先來說說cookie的工作原理：
cookie : 存儲(chǔ)數(shù)據(jù)缀辩，當(dāng)用戶訪問了某個(gè)網(wǎng)站（網(wǎng)頁）的時(shí)候蛇尚，我們就可以通過cookie來像訪問者電腦上存儲(chǔ)數(shù)據(jù) ;
1.不同的瀏覽器存放的cookie位置不一樣肋层，也是不能通用的 ;
2.cookie的存儲(chǔ)是以域名形式進(jìn)行區(qū)分的 ;
3.cookie的數(shù)據(jù)可以設(shè)置名字的;
4.一個(gè)域名下存放的cookie的個(gè)數(shù)是有限制的，不同的瀏覽器存放的個(gè)數(shù)不一樣 ;
5.每個(gè)cookie存放的內(nèi)容大小也是有限制的硕盹，不同的瀏覽器存放大小不一樣 ;
6.我們通過document.cookie來獲取當(dāng)前網(wǎng)站下的cookie的時(shí)候，得到的字符串形式的值叨咖，他包含了當(dāng)前網(wǎng)站下所有的cookie瘩例。他會(huì)把所有的cookie通過一個(gè)分號(hào)+空格的形式串聯(lián)起來;
7.如果我們想長時(shí)間存放一個(gè)cookie。需要在設(shè)置這個(gè)cookie的時(shí)候同時(shí)給他設(shè)置一個(gè)過期的時(shí)間 ;
8.cookie默認(rèn)是臨時(shí)存儲(chǔ)的甸各，當(dāng)瀏覽器關(guān)閉進(jìn)程的時(shí)候自動(dòng)銷毀;
cookie的存儲(chǔ)方式：
document.cookie = '名字=值';
document.cookie = 'username=win';
document.cookie = 'age=23';
document.cookie = '名稱=值;expires=' + 字符串格式的時(shí)間;（給cookie設(shè)置過期時(shí)間）
var oDate = new Date(); （給cookie設(shè)置過期時(shí)間）
oDate.setDate( oDate.getDate() + 5 );（給cookie設(shè)置過期時(shí)間）
alert(typeof oDate.toGMTString()); （把日期對(duì)象轉(zhuǎn)成字符串的形式）
document.cookie = 'username=win;expires=' + oDate.toGMTString();（給cookie設(shè)置成轉(zhuǎn)換后的過期時(shí)間）
> ######封裝一個(gè) 讀取Cookie方法的函數(shù)：
function getCookie(key) {
var arr1 = document.cookie.split('; '); (username=win; age=23,把數(shù)據(jù)從分號(hào)開始拆成一個(gè)個(gè)cookie)
for (var i=0; i<arr1.length; i++) { （循環(huán)cookie）
var arr2 = arr1[i].split('='); （username=win垛贤，,把數(shù)據(jù)從等號(hào)開始拆分）
if ( arr2[0] == key ) { （判斷截取的cookie值是否和key值相等）
return decodeURI(arr2[1]);
}
}
}
封裝一個(gè) 設(shè)置Cookie的函數(shù)：
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
封裝一個(gè)刪除Cookie的函數(shù)：
function removeCookie(key) {
setCookie(key, '', -1);
}
傳參運(yùn)行測(cè)試：
setCookie('sex','男', 10););
removeCookie('username');
removeCookie('age');
removeCookie('sex');
完整示例：
<script>
window.onload = function() {
var oUsername = document.getElementById('username');
var oLogin = document.getElementById('login');
var oDel = document.getElementById('del');
if ( getCookie('username') ) {
oUsername.value = getCookie('username');
}
oLogin.onclick = function() {
alert('登陸成功');
setCookie('username', oUsername.value, 5);
}
oDel.onclick = function() {
removeCookie('username');
oUsername.value = '';
}
}
function getCookie(key) {
var arr1 = document.cookie.split('; '); (username=win; age=23,把數(shù)據(jù)從分號(hào)開始拆成一個(gè)個(gè)cookie)
for (var i=0; i<arr1.length; i++) { （循環(huán)cookie）
var arr2 = arr1[i].split('='); （username=win挎春，,把數(shù)據(jù)從等號(hào)開始拆分）
if ( arr2[0] == key ) { （判斷截取的cookie值是否和key值相等）
return decodeURI(arr2[1]);
}
}
}
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
function removeCookie(key) {
setCookie(key, '', -1);
}
</script>
<body>
<input type="text" id="username" />
<input type="button" value="登陸" id="login" />
<input type="button" value="刪除" id="del" />
</body>
分享技術(shù)棍厂，分享快樂！
