深入JavaScript之獲取cookie以及刪除cookie

sarva 發(fā)布于2019-08-22 11:15 / 2344人閱讀

摘要：如果我想根據(jù)鍵名來(lái)刪除，怎么做原理分析設(shè)置過(guò)期時(shí)間小于當(dāng)前時(shí)間，那么就會(huì)刪除該。

cookie存在哪？

存在document.cookie中

cookie長(zhǎng)啥樣？

cookie是一個(gè)字符串，長(zhǎng)下面這樣:
"name=xxx; age=22;"

注意：分號(hào)后面有個(gè)空格，記住這一點(diǎn)，下面的代碼需要特別注意這一點(diǎn)

如果我想根據(jù)鍵名來(lái)獲取cookie，怎么做？

function getCookie(name) {
  var value = "; "+ document.cookie;
  var parts = value.split("; " + name + "=");
  if(parts.length === 2) {
    return parts.pop().split(";").shift();
  }
}

原理分析:
假設(shè)現(xiàn)在的document.cookie的值為：myName=xxx; age=22; food=apple;
①var value = "; "+ document.cookie;使其變?yōu)?b>; myName=xxx; age=22; food=apple;
②var parts = value.split("; " + name + "="); 假設(shè)傳入的name是age，那么會(huì)根據(jù); age=分割字符串，分割之后得到的數(shù)組為:
["myName=xxx", "22; food=apple;"]
③ if(parts.length === 2)說(shuō)明根據(jù)鍵名得到了對(duì)應(yīng)的值，parts.pop()返回的是數(shù)組中的最后一項(xiàng)，即22; food=apple;,然后調(diào)用split(";")得到數(shù)組["22", "food=apple;"],然后調(diào)用shift()會(huì)返回?cái)?shù)組的第一項(xiàng)，即22, 即可得到我們想要的值

深思: var value = "; "+ document.cookie; 這句代碼是整個(gè)方法的精髓。

如果我想根據(jù)鍵名來(lái)刪除cookie，怎么做？

function deleteCookie(name) {
  document.cookie = name + "=;  expires=Thu, 01 Jan 1970 00:00:01 GMT;"
}

原理分析：
設(shè)置cookie過(guò)期時(shí)間小于當(dāng)前時(shí)間，那么就會(huì)刪除該cookie。

GPU云服務(wù)器云服務(wù)器 javascript刪除cookie javascript獲取cookie 刪除cookie JS刪除cookie

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92035.html

相關(guān)文章

JavaScript是如何工作的:存儲(chǔ)引擎+如何選擇合適的存儲(chǔ)API

摘要：字節(jié)流這個(gè)簡(jiǎn)單的模型將數(shù)據(jù)存儲(chǔ)為長(zhǎng)度不透明的字節(jié)字符串變量，將任何形式的內(nèi)部組織留給應(yīng)用層。字節(jié)流數(shù)據(jù)存儲(chǔ)的代表例子包括文件系統(tǒng)和云存儲(chǔ)服務(wù)。使用同步存儲(chǔ)會(huì)阻塞主線程，并為應(yīng)用程序的創(chuàng)建凍結(jié)體驗(yàn)。這是專門(mén)探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 16 篇。想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！如果你錯(cuò)過(guò)了前面的章節(jié)，可以在這里找到它...

draveness 2019-08-23 14:58 評(píng)論0 收藏0
前端相關(guān)大雜燴

摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開(kāi)發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開(kāi)發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評(píng)論0 收藏0
溫故js系列（3）-cookie優(yōu)缺點(diǎn)&設(shè)置獲取刪除cookie

摘要：優(yōu)缺點(diǎn)優(yōu)點(diǎn)只在中存放不敏感數(shù)據(jù)，即使被盜也不會(huì)有重大損失?？刂频纳?，使之不會(huì)永遠(yuǎn)有效。極高的擴(kuò)展性和可用性，使用簡(jiǎn)單，操作方法方便缺點(diǎn)數(shù)量和長(zhǎng)度的限制。每個(gè)長(zhǎng)度不能超過(guò)，否則會(huì)被截掉。設(shè)置一般主要設(shè)置名字和值有效期路徑域名是否安全傳輸。前端學(xué)習(xí)：教程&開(kāi)發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總歡迎提issues斧正：cookie J...

Vultr 2019-08-19 18:43 評(píng)論0 收藏0
數(shù)據(jù)存儲(chǔ)

摘要：數(shù)據(jù)并非存儲(chǔ)在一個(gè)安全環(huán)境中，其中包含的任何數(shù)據(jù)都可以被他人訪問(wèn)。的兩個(gè)主要目標(biāo)是提供一種在之外存儲(chǔ)會(huì)話數(shù)據(jù)的途徑提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。隨著Web應(yīng)用程序的出現(xiàn)，產(chǎn)生了對(duì)于能夠直接在客戶端上存儲(chǔ)用戶信息能力的要求。比如登錄信息、偏好設(shè)定或其他數(shù)據(jù)，這個(gè)問(wèn)題的第一個(gè)方案是以cookie的形式出現(xiàn)的，今天cookie只是在客戶端存儲(chǔ)數(shù)據(jù)的其中一種選項(xiàng)。 cookie...

frolc 2019-08-23 17:03 評(píng)論0 收藏0
談?wù)勎沂煜び帜吧?em>cookie

摘要：前言大概是我的業(yè)務(wù)領(lǐng)域比較狹窄的原因我總是會(huì)聽(tīng)說(shuō)卻很少在實(shí)際的開(kāi)發(fā)中應(yīng)用或者實(shí)踐過(guò)它今天剛好看到高級(jí)程序設(shè)計(jì)第三版的數(shù)據(jù)存儲(chǔ)部分說(shuō)到了這里就對(duì)做一個(gè)深入訪談希望和我一樣對(duì)似曾相識(shí)的朋友可以真正的熟悉并學(xué)會(huì)利用來(lái)服務(wù)我們的業(yè)務(wù)定義是服務(wù)器為了前言大概是我的業(yè)務(wù)領(lǐng)域比較狹窄的原因,我總是會(huì)聽(tīng)說(shuō)cookie,卻很少在實(shí)際的開(kāi)發(fā)中應(yīng)用或者實(shí)踐過(guò)它,今天剛好看到的數(shù)據(jù)存儲(chǔ)部分,說(shuō)到了cook...

fizz 2019-08-22 18:03 評(píng)論0 收藏0