前言:
- Cookie是指web瀏覽器存儲的少量數(shù)據,它與具體的web站點相關。Cookie數(shù)據會自動在瀏覽器和服務器之間傳輸惰赋,因此服務器端也可以讀寫存儲在客戶端的Cookie值。在JavaScript中,Cookie用于保存狀態(tài)禽最,以及為瀏覽器提供一種身份識別機制。
- 檢測Cookie是否可用:navigator.cookieEnabled
Cookie的有效期和作用域
Cookie默認的有效期很短暫袱饭,只能持續(xù)在瀏覽器的會話期間川无。如果想要延長Cookie的有效期,可以通過設置max-age屬性虑乖。
Cookie的作用域和localStorage類似懦趋,也是通過文檔源和文檔路徑來確定。默認情況下疹味,Cookie對于創(chuàng)建它的頁面仅叫,以及與該頁面同目錄或子目錄下的其他web頁面可見〔谵啵可以通過設置Cookie的path屬性來修改Cookie的作用域诫咱,如果把path設為“/”,就等同于讓Cookie擁有了localStorage的作用域洪灯,即整個文檔源坎缭。
Cookie的作用域默認限制在文檔源之內,如果想實現(xiàn)同一服務器之下不同子域的跨域訪問Cookie签钩,如a.example.com想訪問b.example.com設置的Cookie掏呼,這時候就可以通過設置Cookie的domain屬性來實現(xiàn)。在a.example.com下的一個頁面設置了Cookie铅檩,將其path設為“/”憎夷,并將domain設為“.example.com”,這樣該Cookie就對example.com域下的所有頁面可見昧旨。
同時要注意的是拾给,Cookie的domain只能設置為當前服務器的域富拗。如想實現(xiàn)Cookie在不同父域下的跨域訪問,可參考其他跨域方式鸣戴,如script標簽啃沪、隱藏iframe等。
創(chuàng)建和存儲Cookie
對Cookie的所有操作都要通過讀寫document對象的Cookie屬性來完成窄锅。Cookie的值都是以鍵值對的形式存儲创千。
//創(chuàng)建一個名字Cookie,同時設置它的過期時間
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
//encodeURIComponent() 對 URI 進行編碼
document.cookie=c_name+ "=" +encodeURIComponent(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
同樣的入偷,如果要設置path追驴、domain等屬性,只須以如下形式追加到Cookie值的后面:
;path=path
讀取Cookie
使用document.cookie可以獲取到Cookie的值疏之,不過這個值是一個字符串殿雪,為了更好地查看Cookie的值,往往會采用split()方法將Cookie中的名值對分離出來锋爪。
function getCookie(){
// 初始化要返回的對象
var cookie = {};
var all = document.cookie;
if(all === null){
return cookie;
}
//分離出Cookie的各個屬性
var list = all.split(';');
for(var i = 0;i < list.length;i++){
// 查詢出等號所在的位置
var p = list[i].indexOf('=');
// 分離出名字和值
var name = list[i].substring(0,p);
var value = list[i].substring(p+1);
//對值進行解碼
value = decodeURIComponent(value);
// 將名值對存儲到對象中
cookie[name] = value;
}
return cookie;
}
Cookie的局限性
- Cookie只能存儲少量的數(shù)據丙曙,每個Cookie的大小不超過4KB。RFC標準不允許瀏覽器保存超過300個Cookie其骄,為每個web服務器保存的Cookie數(shù)不超過20個亏镰。
- JavaScript中使用Cookie不會采用任何加密機制,因此它們是不安全的拯爽。