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