cookie的常用操作

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é)議。

另外更多操作詳情點(diǎn)擊API文檔

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末呈昔,一起剝皮案震驚了整個濱河市挥等,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌韩肝,老刑警劉巖触菜,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異哀峻,居然都是意外死亡涡相,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進(jìn)店門剩蟀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來催蝗,“玉大人,你說我怎么就攤上這事育特”牛” “怎么了?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵缰冤,是天一觀的道長犬缨。 經(jīng)常有香客問我,道長棉浸,這世上最難降的妖魔是什么怀薛? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮迷郑,結(jié)果婚禮上枝恋,老公的妹妹穿的比我還像新娘。我一直安慰自己嗡害,他們只是感情好焚碌,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著霸妹,像睡著了一般十电。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天摆出,我揣著相機(jī)與錄音朗徊,去河邊找鬼首妖。 笑死偎漫,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的有缆。 我是一名探鬼主播象踊,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼棚壁!你這毒婦竟也來了杯矩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤袖外,失蹤者是張志新(化名)和其女友劉穎史隆,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體曼验,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泌射,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鬓照。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片熔酷。...
    茶點(diǎn)故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖豺裆,靈堂內(nèi)的尸體忽然破棺而出拒秘,到底是詐尸還是另有隱情,我是刑警寧澤臭猜,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布躺酒,位于F島的核電站,受9級特大地震影響蔑歌,放射性物質(zhì)發(fā)生泄漏羹应。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一丐膝、第九天 我趴在偏房一處隱蔽的房頂上張望量愧。 院中可真熱鬧,春花似錦帅矗、人聲如沸偎肃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽累颂。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間紊馏,已是汗流浹背料饥。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留朱监,地道東北人岸啡。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像赫编,于是被迫代替她去往敵國和親巡蘸。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內(nèi)容