【JavaScript】Cookie詳解

前言:

  • 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的局限性

  1. Cookie只能存儲少量的數(shù)據丙曙,每個Cookie的大小不超過4KB。RFC標準不允許瀏覽器保存超過300個Cookie其骄,為每個web服務器保存的Cookie數(shù)不超過20個亏镰。
  2. JavaScript中使用Cookie不會采用任何加密機制,因此它們是不安全的拯爽。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末索抓,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子毯炮,更是在濱河造成了極大的恐慌逼肯,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桃煎,死亡現(xiàn)場離奇詭異篮幢,居然都是意外死亡,警方通過查閱死者的電腦和手機备禀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門洲拇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奈揍,“玉大人曲尸,你說我怎么就攤上這事∧泻玻” “怎么了另患?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蛾绎。 經常有香客問我昆箕,道長鸦列,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任鹏倘,我火速辦了婚禮薯嗤,結果婚禮上,老公的妹妹穿的比我還像新娘纤泵。我一直安慰自己骆姐,他們只是感情好,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布捏题。 她就那樣靜靜地躺著玻褪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪公荧。 梳的紋絲不亂的頭發(fā)上带射,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天,我揣著相機與錄音循狰,去河邊找鬼窟社。 笑死,一個胖子當著我的面吹牛绪钥,可吹牛的內容都是我干的桥爽。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼昧识,長吁一口氣:“原來是場噩夢啊……” “哼钠四!你這毒婦竟也來了?” 一聲冷哼從身側響起跪楞,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤缀去,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后甸祭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缕碎,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年池户,在試婚紗的時候發(fā)現(xiàn)自己被綠了咏雌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡校焦,死狀恐怖赊抖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情寨典,我是刑警寧澤氛雪,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站耸成,受9級特大地震影響报亩,放射性物質發(fā)生泄漏浴鸿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一弦追、第九天 我趴在偏房一處隱蔽的房頂上張望岳链。 院中可真熱鬧,春花似錦劲件、人聲如沸宠页。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽举户。三九已至,卻和暖如春遍烦,著一層夾襖步出監(jiān)牢的瞬間俭嘁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工服猪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留供填,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓罢猪,卻偏偏與公主長得像近她,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子膳帕,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • HTTP cookie(也稱為web cookie,網絡cookie,瀏覽器cookie或者簡稱cookie)是網...
    留七七閱讀 17,880評論 2 71
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理粘捎,服務發(fā)現(xiàn),斷路器危彩,智...
    卡卡羅2017閱讀 134,637評論 18 139
  • 作者:晚晴幽草軒www.jeffjade.com/2016/10/31/115-summary-of-cookie...
    饑人谷_Dylan閱讀 1,224評論 0 51
  • 注:本文轉載自前端大全 背景 在HTTP協(xié)議的定義中攒磨,采用了一種機制來記錄客戶端和服務器端交互的信息,這種機制被稱...
    楠小忎閱讀 669評論 0 0
  • 背景在HTTP協(xié)議的定義中汤徽,采用了一種機制來記錄客戶端和服務器端交互的信息娩缰,這種機制被稱為cookie,cooki...
    時芥藍閱讀 2,357評論 1 17