,,

還在用document.cookie操作cookie嗎？試試這個(gè)CookieStore

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

2025年4月12日 10:29 本文熱度 453

以前在開發(fā)時(shí)想要獲取和修改cookie一直都是使用document.cookie來進(jìn)行操作的，而且cookie的屬性又很多，賦值起來十分不方便，并且獲取的時(shí)候不能根據(jù)屬性名進(jìn)行精確獲取單獨(dú)的一條cookie，真的很難搞誒。那有沒有什么比較現(xiàn)代化的API來幫助我們更好的處理cookie呢。

需棄用的`document.cookie`

我們先來看看document.cookie處理方式

假設(shè)我想要獲取當(dāng)前文檔某一個(gè)cookie，那我也必須使用document.cookie來獲取所有非httpOnly, secure的cookie，然后在進(jìn)行提取。

有時(shí)候我們寫模板就需要通過結(jié)果去獲取數(shù)據(jù)，但是接口有需要使用cookies中的某個(gè)cookie，所以就需要進(jìn)行額外提取。比如我要獲取alimail的_csrf_token_cookie，就需要下面這樣提取。

document.cookie
  .split("; ") // 以分號(hào)和空格分隔
  .find((item) => item.includes("_csrf_token_="))
  ?.replace("_csrf_token_=", "");

目前在開發(fā)中前端寫入cookie沒有遇見，但是也很麻煩，特別是在定義cookie的不同屬性，而且不支持一次性寫入多cookie。

并且設(shè)置的時(shí)候還有些特殊的限制需要注意。

路徑限制
- 設(shè)置 Path=/app 時(shí)，該 Cookie 僅在路徑 /app 及其子路徑（如 /app/sub）下生效。
- 若當(dāng)前頁面路徑不在 /app 或其子路徑下，瀏覽器會(huì)忽略此 Cookie。

域名不匹配
- 默認(rèn)情況下，Cookie 的 Domain 屬性為當(dāng)前頁面的域名。
- 若嘗試設(shè)置跨域 Cookie（如從 www.example.com 設(shè)置 Domain=example.com），需確保當(dāng)前域名是子域名且符合瀏覽器安全策略。
未編碼特殊字符
- 由于;、,、空格等符號(hào)在cookie中有特殊用處，鍵值不包含它們，如果包含需使用 encodeURIComponent() 編碼。

各位兄弟你們?cè)谌粘ｉ_發(fā)中如何使用的cookie啊。

趕快來使用`CookieStore`

CookieStore 是瀏覽器提供的一個(gè)新的 API，旨在更現(xiàn)代化、更便捷地管理 Cookie。

異步操作：基于 Promise，避免傳統(tǒng) document.cookie 同步操作可能導(dǎo)致的性能問題。
類型安全：直接操作 Cookie 對(duì)象（鍵值對(duì)），而非手動(dòng)解析字符串。
Service Worker 支持：可在 Service Worker 中讀寫 Cookie，實(shí)現(xiàn)離線場(chǎng)景下的 Cookie 管理。
細(xì)粒度控制：支持設(shè)置 Cookie 的路徑、域名、過期時(shí)間、安全屬性等。
事件監(jiān)聽：可監(jiān)聽 Cookie 的變化（新增、修改、刪除）。

寫入`set`

自動(dòng)化的檢測(cè)，我們?cè)僖膊挥帽凰Ａ?，通過document.cookie明明設(shè)置了對(duì)應(yīng)的cookie，為啥獲取不到呢。讓我們自己掌控我們的定義，設(shè)置的有問題直接拋錯(cuò)。

const zh = await cookieStore.set({
  name: 'zh',
  value: 'llm',
  expires: Date.now() + 24 * 60 * 60 * 1000, // 1天后過期
  domain: 'juejin.cn',
  path: '/',
  secure: true,
  sameSite: 'lax'
});

獲取`get, getAll`

get 通過cookieName獲取某個(gè)指定cookie。對(duì)于同名的cookie，應(yīng)該會(huì)獲取最后一次添加的。

const zh = await cookieStore.get("zh")

getAll 獲取所有非httpOnly, secure的cookie。

const allCookies = await cookieStore.getAll();

刪除`delete`

對(duì)于同名cookie，也是刪除最后一次添加的。

const delZh = await cookieStore.delete('zh');

change事件

因?yàn)?code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.87em; word-break: break-word; border-radius: 2px; overflow-x: auto; background-color: rgb(255, 245, 245); color: rgb(255, 80, 44); padding: 0.065em 0.4em;">CookieStore繼承了EventTarget所以它理所應(yīng)當(dāng)?shù)目梢员O(jiān)聽事件，剛好html5提供了一個(gè)change事件可以監(jiān)聽cookie的變化。

event.changed可以拿到所有添加的cookie。
event.deleted可以拿到所有刪除的cookie。

cookieStore.addEventListener('change', event => {
  event.changed.forEach(cookie => {
    console.log(`Cookie 被修改: ${cookie.name} = ${cookie.value}`);
  });
  event.deleted.forEach(cookie => {
    console.log(`Cookie 被刪除: ${cookie.name}`);
  });
});