JavaScript是運(yùn)行在客戶(hù)端的腳本，因此一般是不能夠設(shè)置Session的，因?yàn)镾ession是運(yùn)行在服務(wù)器端的。而cookie是運(yùn)行在客戶(hù)端的，所以可以用JS來(lái)設(shè)置cookie。
假設(shè)有這樣一種情況，在某個(gè)用例流程中，由A頁(yè)面跳至B頁(yè)面，若在A頁(yè)面中采用JS用變量temp保存了某一變量的值，在B頁(yè)面的時(shí)候，同樣需要使用JS來(lái)引用temp的變量值，對(duì)于JS中的全局變量或者靜態(tài)變量的生命周期是有限的，當(dāng)發(fā)生頁(yè)面跳轉(zhuǎn)或者頁(yè)面關(guān)閉的時(shí)候，這些變量的值會(huì)重新載入，即沒(méi)有達(dá)到保存的效果。解決這個(gè)問(wèn)題的最好的方案是采用cookie來(lái)保存該變量的值，那么如何來(lái)設(shè)置和讀取cookie呢？
首先需要稍微了解一下cookie的結(jié)構(gòu)，簡(jiǎn)單地說(shuō)：cookie是以鍵值對(duì)的形式保存的，即key=value的格式。各個(gè)cookie之間一般是以“;”分隔。
JS設(shè)置cookie
假設(shè)在A頁(yè)面中要保存變量username的值("yyf")到cookie中,key值為name，則相應(yīng)的JS代碼為：
document.cookie = "name=" + yyf;
假設(shè)需要加上過(guò)期時(shí)間，方法如下：
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);//時(shí)間戳以毫秒為單位
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
JS讀取cookie
假設(shè)cookie中存儲(chǔ)的內(nèi)容為：username=yyf;password=123
則在B頁(yè)面中獲取變量username的值的JS代碼如下：
var username=document.cookie.split(";")[0].split("=")[1];
//則該username獲取結(jié)果為yyf
注意：上述方法僅指明確cookie的數(shù)據(jù)數(shù)目和順序的情況下才可使用，比如自己設(shè)置的或者通過(guò)瀏覽器查看后的頁(yè)面。若是一個(gè)陌生頁(yè)面，則應(yīng)該通過(guò)如下萬(wàn)能法
function getCookie(cName){
var cookieArr = document.cookie.split(";");//將cookie通過(guò)分號(hào)分割，存為一個(gè)名為cookieArr的數(shù)組
for (var i=0; i < cookieArr.length; i++){
var cookieVal = cookieArr[i].split("=");//遍歷數(shù)組，將每一個(gè)cookie的key和value通過(guò)等于號(hào)分割，存為一個(gè)名為cookieVal的數(shù)組
if (cName == cookieVal[0])
return unescape(cookieVal[1]);//將value值解密后拿出
}
return null;
}
刪除cookies
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);//將本地時(shí)間戳設(shè)置為不存在的一個(gè)時(shí)間即可
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
jQuery-Cookie插件
jQuery.cookie.js是個(gè)很好的cookie插件，包括設(shè)置、刪除、獲取等一系列完整的cookie操作
- 創(chuàng)建會(huì)話(huà)cookie（Session cookie，既瀏覽器內(nèi)存cookie，瀏覽器關(guān)閉后自動(dòng)刪除）
$.cookie('the_cookie', 'the_value');
- 創(chuàng)建一個(gè)生生存周期為7天的cookie
$.cookie('the_cookie', 'the_value', { expires: 7 });
- 創(chuàng)建一個(gè)有期限的cookie，整個(gè)站點(diǎn)可以讀取
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
- 讀取cookie
$.cookie('the_cookie'); // => "the_value"
$.cookie('not_existing'); // => undefined
- 讀取所有可用cookie
$.cookie(); // => { "the_cookie": "the_value", "...remaining": "cookies" }
- 刪除cookie
// 找到指定的cookie返回true，否則返回false
$.removeCookie('the_cookie');
// 刪除指定過(guò)path的cookie
$.removeCookie('the_cookie', { path: '/' });
$.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});
(1)讀取cookie值
$.cookie(cookieName) cookieName:要讀取的cookie名稱(chēng)。
示例：$.cookie("username"); 讀取保存在cookie中名為的username的值。
(2)寫(xiě)入設(shè)置Cookie值：
$.cookie(cookieName,cookieValue); cookieName:要設(shè)置的cookie名稱(chēng)，cookieValue表示相對(duì)應(yīng)的值。
示例:$.cookie("username","admin"); 將值"admin"寫(xiě)入cookie名為username的cookie中。
$.cookie("username",NULL); 銷(xiāo)毀名稱(chēng)為username的cookie
(3)[option]參數(shù)說(shuō)明：
expires: 有限日期，可以是一個(gè)整數(shù)或一個(gè)日期(單位：天)?！ ∵@個(gè)地方也要注意，如果不設(shè)置這個(gè)東西，瀏覽器關(guān)閉之后此cookie就失效了
path: cookie值保存的路徑，默認(rèn)與創(chuàng)建頁(yè)路徑一致。
domin: cookie域名屬性，默認(rèn)與創(chuàng)建頁(yè)域名一樣?！ ∵@個(gè)地方要相當(dāng)注意，跨域的概念，如果要主域名二級(jí)域名有效則要設(shè)置 ".xxx.com"
secrue: 一個(gè)布爾值，表示傳輸cookie值時(shí)，是否需要一個(gè)安全協(xié)議。
