丸子學(xué)JS(學(xué)習(xí)半小時(shí) - cookie存儲(chǔ))

cookie是什么

HTTP協(xié)議本身是無(wú)狀態(tài)的,即服務(wù)器無(wú)法判斷用戶(hù)身份转培。Cookie實(shí)際上是一小段的文本信息(key-value格式)浸须。客戶(hù)端向服務(wù)器發(fā)起請(qǐng)求裂垦,如果服務(wù)器需要記錄該用戶(hù)狀態(tài)肌索,就使用response向客戶(hù)端瀏覽器頒發(fā)一個(gè)Cookie诚亚。客戶(hù)端瀏覽器會(huì)把Cookie保存起來(lái)闸准。當(dāng)瀏覽器再請(qǐng)求該網(wǎng)站時(shí)夷家,瀏覽器把請(qǐng)求的網(wǎng)址連同該Cookie一同提交給服務(wù)器或辖。服務(wù)器檢查該Cookie,以此來(lái)辨認(rèn)用戶(hù)狀態(tài)

cookie機(jī)制

當(dāng)用戶(hù)第一次訪問(wèn)并登陸一個(gè)網(wǎng)站的時(shí)候缺谴, cookie的設(shè)置以及發(fā)送會(huì)經(jīng)歷以下4個(gè)步驟:

  1. 客戶(hù)端發(fā)送一個(gè)請(qǐng)求到服務(wù)器
  2. 服務(wù)器發(fā)送一個(gè)HttpResponse響應(yīng)到客戶(hù)端湿蛔,其中包含Set-Cookie的頭部
  3. 客戶(hù)端保存cookie阳啥,之后向服務(wù)器發(fā)送請(qǐng)求時(shí)察迟,HttpRequest請(qǐng)求中會(huì)包含一個(gè)Cookie的頭部
  4. 服務(wù)器返回響應(yīng)數(shù)據(jù)

cookie屬性項(xiàng)

Expires

該屬性用來(lái)設(shè)置Cookie的有效期扎瓶。Cookie中的maxAge用來(lái)表示該屬性概荷,單位為秒误证。Cookie中通過(guò)getMaxAge()和setMaxAge(int maxAge)來(lái)讀寫(xiě)該屬性。maxAge有3種值遏考,分別為正數(shù)诈皿,負(fù)數(shù)和0。
如果maxAge屬性為正數(shù)壶冒,則表示該Cookie會(huì)在maxAge秒之后自動(dòng)失效。瀏覽器會(huì)將maxAge為正數(shù)的Cookie持久化烟零,即寫(xiě)到對(duì)應(yīng)的Cookie文件中(每個(gè)瀏覽器存儲(chǔ)的位置不一致)锨阿。無(wú)論客戶(hù)關(guān)閉了瀏覽器還是電腦墅诡,只要還在maxAge秒之前末早,登錄網(wǎng)站時(shí)該Cookie仍然有效。當(dāng)maxAge屬性為負(fù)數(shù)说庭,則表示該Cookie只是一個(gè)臨時(shí)Cookie然磷,不會(huì)被持久化,僅在本瀏覽器窗口或者本窗口打開(kāi)的子窗口中有效刊驴,關(guān)閉瀏覽器后該Cookie立即失效

cookie的域名

Cookie是不可以跨域名的姿搜,隱私安全機(jī)制禁止網(wǎng)站非法獲取其他網(wǎng)站的Cookie

cookie的路徑

path屬性決定允許訪問(wèn)Cookie的路徑。比如捆憎,設(shè)置為"/"表示允許所有路徑都可以使用Cookie

cookie的前端設(shè)置舅柜、獲取與刪除

let cookie = {
    /**
     * 設(shè)置cookie方法
     * @param key{string} cookie名稱(chēng)
     * @param val{string} cookie值
     * @param hours{number} 過(guò)期時(shí)間(小時(shí))
     */
    set: function (key, val, hours) {
      let date = new Date(); //獲取當(dāng)前時(shí)間
      let expiresHours = parseInt(hours);  //將date設(shè)置為n小時(shí)以后的時(shí)間
      date.setTime(date.getTime() + expiresHours * 24 * 3600 * 1000); //格式化為cookie識(shí)別的時(shí)間
      document.cookie = key + "=" + val + ";expires=" + date.toGMTString();  //設(shè)置cookie
    },
    /**
     * 移除cookie方法
     * @param key{string} cookie名稱(chēng)
     */
    remove: function (key) {
      this.set(key, "", 0)
    },
    /**
     * 獲取cookie方法
     * @param key{string} cookie名稱(chēng)
     * @returns {string} 對(duì)應(yīng)名稱(chēng)的cookie值
     */
    get: function (key) {//獲取cookie方法
      /*獲取cookie參數(shù)*/
      let getCookie = document.cookie.replace(/[ ]/g, "");  //獲取cookie,并且將獲得的cookie格式化攻礼,去掉空格字符
      let arrCookie = getCookie.split(";")  //將獲得的cookie以"分號(hào)"為標(biāo)識(shí) 將cookie保存到arrCookie的數(shù)組中
      let tips = "";  //聲明變量tips
      for (let i = 0; i < arrCookie.length; i++) {   //使用for循環(huán)查找cookie中的tips變量
        let arr = arrCookie[i].split("=");   //將單條cookie用"等號(hào)"為標(biāo)識(shí)业踢,將單條cookie保存為arr數(shù)組
        if (key === arr[0]) {  //匹配變量名稱(chēng),其中arr[0]是指的cookie名稱(chēng)礁扮,如果該條變量為tips則執(zhí)行判斷語(yǔ)句中的賦值操作
          tips = arr[1];   //將cookie的值賦給變量tips
          break;   //終止for循環(huán)遍歷
        }
      }
      return tips;
    }
  }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末瞬沦,一起剝皮案震驚了整個(gè)濱河市锰提,隨后出現(xiàn)的幾起案子边坤,更是在濱河造成了極大的恐慌,老刑警劉巖旺订,帶你破解...
    沈念sama閱讀 212,542評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件樱调,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)晦闰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)声滥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人污朽,你說(shuō)我怎么就攤上這事炎功⊥鑫剩” “怎么了束世?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,021評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我喇勋,道長(zhǎng)蛤袒,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,682評(píng)論 1 284
  • 正文 為了忘掉前任矗漾,我火速辦了婚禮都办,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己甫男,他們只是感情好碍拆,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,792評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布婆跑。 她就那樣靜靜地躺著疟赊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪地来。 梳的紋絲不亂的頭發(fā)上币绩,一...
    開(kāi)封第一講書(shū)人閱讀 49,985評(píng)論 1 291
  • 那天董瞻,我揣著相機(jī)與錄音挟秤,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛燕雁,可吹牛的內(nèi)容都是我干的懂衩。 我是一名探鬼主播枷餐,決...
    沈念sama閱讀 39,107評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼典徘!你這毒婦竟也來(lái)了裆甩?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,845評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后就轧,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,299評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,612評(píng)論 2 327
  • 正文 我和宋清朗相戀三年异希,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了称簿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片憨降。...
    茶點(diǎn)故事閱讀 38,747評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡耕赘,死狀恐怖九火,靈堂內(nèi)的尸體忽然破棺而出炫彩,到底是詐尸還是另有隱情夺颤,我是刑警寧澤世澜,帶...
    沈念sama閱讀 34,441評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站署穗,受9級(jí)特大地震影響寥裂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜案疲,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,072評(píng)論 3 317
  • 文/蒙蒙 一封恰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧褐啡,春花似錦诺舔、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,828評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至懂盐,卻和暖如春褥赊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背莉恼。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,069評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工拌喉, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留速那,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,545評(píng)論 2 362
  • 正文 我出身青樓尿背,卻偏偏與公主長(zhǎng)得像端仰,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子残家,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,658評(píng)論 2 350

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