面試時候經(jīng)常會被問及 Cookie 大小限制，但一直沒嘗試寫一些 demo 測試下溢出極限值會怎樣~~

本文就來看看各種極限情況！

英文

測試代碼：

(() => {
  const maxSize = 4 * 1024; // 4KB
  const name = 'name'
  // 最大出入的 value 長度
  const maxValueStr = 'a'.repeat(maxSize - name.length);
  // firefox 不能使用 Secure
  document.cookie = `${name}=${encodeURIComponent(maxValueStr)};expires=${new Date(2026, 0, 1).toUTCString()};path=/`;
})()

Chrome/Edge/Firefox 瀏覽器

英文：名字 + 內(nèi)容 字符串長度限制 4096 字符。

各家瀏覽器的存儲面板都能看到 Cookie 大小，此大小包含存入 Cookie 的名字和內(nèi)容加在一起的長度。

不同之處

Chrome/Edge

超過 4KB 大小無法存儲，瀏覽器無報錯，也無提示，純粹毫無感知。

Firefox

超過 4KB 大小會有提示：

Cookie “name”太大而無效。最大大小為 4096 字節(jié)。

比如這段代碼存入 cookie 的值超過一個字符：

(() => {
  const maxSize = 4 * 1024 - 5; // 4KB
  const maxStr = 'a'.repeat(maxSize) + 'b1';
  console.log('?? ~ maxStr:', maxStr.length);
  document.cookie = `name=${encodeURIComponent(maxStr)};expires=${new Date(2026, 0, 1).toUTCString()};path=/`;
})()

運(yùn)行有警告：

如果在 Firefox 中 localhost 使用 secure 會報錯！！

由于非 HTTPS Cookie 無法設(shè)置“secure”屬性，已拒絕 Cookie “name”。

比如這段代碼在本地 localhost 的環(huán)境中 Chrome 和 Edge 都能正常運(yùn)行，但是 Firefox 會報錯：

document.cookie = `name=${encodeURIComponent(maxStr)};expires=${new Date(2026, 0, 1).toUTCString()};path=/;Secure;SameSite=Lax`;

報錯：

中文

一個中文占用3個英文長度！！！

測試代碼：

(() => {
  const maxSize = 4 * 1024; // 4KB
  const name = 'name'
  const valueSize = maxSize - name.length
  console.log(valueSize / 3);
  const value = '中'.repeat(Math.floor(valueSize / 3));
  // firefox 不能使用 Secure
  document.cookie = `name=${(value)};expires=${new Date(2026, 0, 1).toUTCString()};path=/`;
})()

4KB 字符串長度減去 name 的長度，除以 3 等于 1364 中文字符長度，剛好是瀏覽器能存儲的極限值。

Firefox 顯示的大小比較另類，它沒按照轉(zhuǎn)換后的大小顯示，而是直接顯示了中文值長度 + 英文名稱長度，而 Chrome 和 Edge 顯示的是占用空間長度。如下圖：

一般在存儲中文的的時候，會用到 encodeURIComponent 編碼一下中文字符，這方法編碼之后，一個中文字符將會轉(zhuǎn)成 9 個英文字符，使用這種方法存儲中文時候需特別注意！！！

使用 cookieStore

cookieStore 存入超過大小限制的字符串長度時，會報一個奇奇怪怪的錯誤，比如：

(async () => {
  const maxSize = 4 * 1024; // 4KB
  const name = 'name'
  const valueSize = maxSize - name.length
  console.log(valueSize / 3);
  const value = '中'.repeat(Math.floor(valueSize / 3));
  const res = await cookieStore.set({
    name: 'name',
    // 比極限值多出一個長度
    value: value + '1',
    expires: new Date(2026, 0, 1).getTime(), // Unix 時間戳（以毫秒為單位表示）
    path: '/',
    sameSite: 'lax'
  })
  console.log('存儲結(jié)果：', res); // 正常寫入返回 undefined
})()

報錯：

翻譯過來的大致意思：由于解析時出現(xiàn)問題，導(dǎo)致 Cookie 格式錯誤，無法存儲。

反正不是明確的告訴開發(fā)者長度異常了！！所以在使用 cookieStore 時，需要進(jìn)行異常捕獲。

本文編寫時 Firefox 最新版本 138.0.4 還不支持 cookieStore。

Cookie 個數(shù)限制

單個 Cookie 的大小限制了解了，再看看 Cookie 個數(shù)限制。

多個超大 Cookie

測試代碼：

(async () => {
  document.cookie = ''
  const name = 'name'
  // 最大出入的 value 長度
  let cookieStr = ''
  for (let i = 0; i < 200; i++) {
    document.cookie = `${name + i}=${'a'.repeat(4000)};expires=${new Date(2026, 0, 1).toUTCString()};path=/`;
  }
  // JS 查找 name 出現(xiàn)次數(shù)
  console.log(document.cookie.match(/name/g).length)
})()

第一次都能正常打開頁面，第二次刷新頁面之后都會報錯：

此問題應(yīng)該是跟 http 協(xié)議的限制有關(guān)，請求頭發(fā)送的 Cookie 長度太長了，導(dǎo)致響應(yīng) 431 狀態(tài)碼。

Firefox 在頁面未正常打卡的情況下還不支持清空 Cookie，需要點擊右上角菜單--設(shè)置--隱私與安全--清除數(shù)據(jù)刪除保存的超大 Cookie 瀏覽器才能正常訪問。

小 Cookie 個數(shù)限制

測試代碼：

(async () => {
  function setCookie(name, value) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        document.cookie = `${name}=${value};path=/`;
        resolve()
      }, 5);
    });
  }
  const name = 'name'
  // 最大出入的 value 長度
  let cookieStr = ''
  for (let i = 0; i < 2000; i++) {
    console.log('正在寫入：', i);
    await setCookie(name + i, 'a')
  }
  setTimeout(() => {
    // JS 查找 name 出現(xiàn)次數(shù)
    console.log(document.cookie?.match(/name/g)?.length)
  }, 1000);
})()

Chrome、Edge、Firefox 瀏覽器每次刷新寫入的 Cookie 個數(shù)都不一樣，可以復(fù)制以上代碼在瀏覽器中測試！

AI 回答：

轉(zhuǎn)自https://www.cnblogs.com/linx/p/19010392