這篇文章將為大家詳細(xì)講解有關(guān)Cookie的用法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

嵐縣網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

用 JS 操作 Cookie 其實(shí)是很麻煩的，并不存在一個(gè)簡(jiǎn)單的 API 能讓我們獲取或者設(shè)置 Cookie。

一個(gè)操作 Cookie 的 API 是document.cookie，但是這句代碼使用起來(lái)很難受。如果說(shuō)我們想要獲取一個(gè)需要的 Cookie，可能得先寫(xiě)這么一個(gè) utils 函數(shù)：

function getCookie(name) {  const value = `; ${document.cookie}`;  const parts = value.split(`; ${name}=`);  if (parts.length === 2) return parts.pop().split(';').shift();
}復(fù)制代碼

但是在 Chrome 87 版本中我們無(wú)需再引入這樣的代碼了，取而代之的是新的 API：cookieStore。這是一個(gè)異步的 API，可以很方便地獲取設(shè)置以及監(jiān)聽(tīng) Cookie 的改變。

如果你想下載 beta 版本的 Chrome，可以在 此鏈接 中獲取。

以下是新內(nèi)容的介紹。

獲取 Cookie

剛才在上文中我們已經(jīng)了解到在之前獲取一個(gè)需要的 Cookie 是有多麻煩，如今我們只需一句話就可以獲取想要的內(nèi)容了。

cookieStore.get 有兩種函數(shù)簽名，前者我們可以通過(guò)傳入 cookie 的屬性去匹配想要的內(nèi)容，后者則是直接傳入name 獲取。API 很符合直覺(jué)，比之前的方式不知道好到哪里去了。

當(dāng)然除了獲取單個(gè) cookie 之外，新的 API 還提供了獲取多個(gè) cookie 的方式。比如說(shuō)現(xiàn)在我想獲取所有屬于某個(gè) domain 的 cookies，就可以使用如下方式：

設(shè)置 Cookie

在之前我們?nèi)绻枰O(shè)置 Cookie 的話，應(yīng)該會(huì)寫(xiě)以下類似的代碼，還是在操作document.cookie

const setCookie = (name, value, days = 7, path = '/') => {  const expires = new Date(Date.now() + days * 864e5).toUTCString()  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}復(fù)制代碼

現(xiàn)在我們可以通過(guò)cookieStore.set 來(lái)很方便的設(shè)置 Cookie 了：

set 函數(shù)支持兩種簽名，前者可以設(shè)置所有 Cookie 上的內(nèi)容，后者就是key-value 的形式。

刪除 Cookie

說(shuō)完獲取和刪除 Cookie，那么相應(yīng)的刪除操作肯定也是不能少的。

在這之前如果你想刪除一個(gè) Cookie，那么需要把這個(gè) Cookie 的過(guò)期時(shí)間設(shè)置在過(guò)去，過(guò)期了自然而然就失效了。

var delete_cookie = function(name) {    document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
};復(fù)制代碼

看起來(lái)很奇怪，想刪除一個(gè) Cookie 不是把字段刪了，而是把它過(guò)期。現(xiàn)在我們有了新的 API 就不需這樣做了：

同樣的，delete API 也有兩個(gè)函數(shù)簽名，單純字符串的時(shí)候等同于需要?jiǎng)h除 Cookie 的name，傳個(gè)對(duì)象時(shí)簽名略有些與之前不同，需要注意簽名中可選屬性都是有默認(rèn)值的：

dictionary CookieStoreDeleteOptions {
  required USVString name;
  USVString? domain = null;
  USVString path = "/";
};復(fù)制代碼

監(jiān)聽(tīng) Cookie 的改變

這個(gè)功能應(yīng)該是之前沒(méi)有的，如今可以通過(guò)新的 API 監(jiān)聽(tīng) Cookie 的改變及刪除。

當(dāng)我們?cè)O(shè)置或者刪除 Cookie 時(shí)對(duì)應(yīng)的事件就會(huì)拋出我們所改變的內(nèi)容。

關(guān)于Cookie的用法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

名稱欄目：Cookie的用法-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.chinadenli.net/article44/deeche.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、營(yíng)銷型網(wǎng)站建設(shè)、建站公司、電子商務(wù)、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)