- cookie 用來(lái)存儲(chǔ)數(shù)據(jù)數(shù)據(jù),當(dāng)用戶訪問(wèn)了某個(gè)網(wǎng)站(網(wǎng)頁(yè))的時(shí)候,我們就可以通過(guò)cookie來(lái)向訪問(wèn)者的電腦上存儲(chǔ)數(shù)據(jù)
- 不同的瀏覽器存放的cookie位置不一樣接剩，所以也是不能通用的
- cookie的存儲(chǔ)是以域名的形式進(jìn)行劃分的
- cookie的數(shù)據(jù)是可以設(shè)置名字的
- 一個(gè)域名下面存放的cookie的個(gè)數(shù)是有限制的勾怒。不同的瀏覽器存放的個(gè)數(shù)也不一樣。
- 每一個(gè)cookie存放的內(nèi)容大小也是有限制的，不同的瀏覽器存放的內(nèi)容大小不一樣求晶。
如果我們想長(zhǎng)時(shí)間存放一個(gè)cookie记焊，需要設(shè)置這個(gè)cookie的時(shí)候,同時(shí)給他設(shè)置一個(gè)過(guò)期的時(shí)間(這個(gè)時(shí)間必須是字符串的格式)cookie默認(rèn)是臨時(shí)存儲(chǔ)的逸月，當(dāng)瀏覽器關(guān)閉進(jìn)程的時(shí)候，自動(dòng)銷毀.
cookie的操作
//document.cookie = '名字=值;expires='+字符串格式的時(shí)間
例如:
var oDate = new Date();
oDate.setDate(oDate.getDate()+10); //10天以后銷毀
//oDate.toGMTString(); 將日期轉(zhuǎn)換為字符串格式
//內(nèi)容最好編碼存放,encodeURI
//alert(encodeURI('你好'));
//alert(decodeURI('%E4%BD%A0%E5%A5%BD'));結(jié)果就是你好
document.cookie = 'username='+encodeURI('leo\n你好')+'leo;expires='+oDate.toGMTString();
document.cookie = 'age=32';
我把獲取到cookie,設(shè)置cookie,刪除cookie封裝成了插件
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 setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie = key+"="+value+' ;expires='+oDate.toGMTString();
}
刪除cookie,一般用不到刪除遍膜。時(shí)間到了自動(dòng)就沒了
function deleteCookie(key){
setCookie(key," ",-1)
}
下面是cookie的運(yùn)用
記錄用戶登錄名:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookie獲取</title>
</head>
<body>
<input type = "text" id="username">
<input type = "button" id="login" value="登錄">
<input type="button" value="刪除" id="del">
<script>
var oUesername = document.getElementById("username");
var oLogin = document.getElementById("login");
var oDel = document.getElementById("del");
//工具類開始
//獲取到cookie
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]);
}
}
}
//獲取結(jié)束
//設(shè)置cookie
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie = key+"="+value+' ;expires='+oDate.toGMTString();
}
//設(shè)置結(jié)束
//刪除cookie
function deleteCookie(key){
setCookie(key," ",-1)
}
//刪除結(jié)束
//工具類結(jié)束
if(getCookie("username"))
{
oUesername.value = getCookie("username");
}
oLogin.onclick = function(){
window.alert("登陸成功");
setCookie("username","小明",10);
}
oDel.onclick = function(){
deleteCookie("username");
oUesername.value = "";
}
</script>
</body>
</html>
