JavaScript是運(yùn)行在客戶端的腳本,因此一般是不能夠設(shè)置Session的刊棕,因為Session是運(yùn)行在服務(wù)器端的炭晒。而cookie是運(yùn)行在客戶端的,所以可以用JS來設(shè)置cookie甥角。
假設(shè)有這樣一種情況,在某個用例流程中识樱,由A頁面跳至B頁面嗤无,若在A頁面中采用JS用變量temp保存了某一變量的值震束,在B頁面的時候,同樣需要使用JS來引用temp的變量值当犯,對于JS中的全局變量或者靜態(tài)變量的生命周期是有限的垢村,當(dāng)發(fā)生頁面跳轉(zhuǎn)或者頁面關(guān)閉的時候,這些變量的值會重新載入嚎卫,即沒有達(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è)需要加上過期時間倍谜,方法如下:
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);//時間戳以毫秒為單位
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è)置為不存在的一個時間即可
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值時诱桂,是否需要一個安全協(xié)議。