如何在Cookie中存储超4KB数据？求实现方案及代码示例

Got it, let's tackle this problem. Since you can't use LocalStorage and need to store data larger than 4KB in cookies, the solution is to split your big string into smaller chunks, store each chunk in a separate cookie with an index identifier, then reassemble them when you need the full data. Here's a detailed implementation with code examples:

The 4KB limit for a single cookie refers to the encoded character length. So we'll split the large string into segments that fit within this limit (after encoding), label each segment with an index (like data_chunk_0, data_chunk_1), and then stitch them back together by reading the indexed cookies in order.

1. Split the Large String #

This function splits the input string into chunks, accounting for the length increase caused by encodeURIComponent (since encoding adds extra characters for special symbols). We reserve enough space for the cookie's key name to avoid exceeding the 4KB limit.

function splitLargeString(str, maxChunkSize = 3900) {
  const chunks = [];
  let currentIndex = 0;
  const totalLength = str.length;

  while (currentIndex < totalLength) {
    // Start with a tentative chunk
    let chunk = str.slice(currentIndex, currentIndex + maxChunkSize);
    let encodedChunk = encodeURIComponent(chunk);
    
    // Adjust chunk size if encoding pushes it over 4KB (account for cookie key length)
    const keyLength = encodeURIComponent(`data_chunk_${chunks.length}`).length;
    while (encodedChunk.length > 4096 - keyLength) {
      chunk = chunk.slice(0, chunk.length - 1);
      encodedChunk = encodeURIComponent(chunk);
    }

    chunks.push(chunk);
    currentIndex += chunk.length;
  }

  return chunks;
}

2. Store Chunks in Cookies #

Loop through the split chunks and create a cookie for each, with an indexed name. We also set an expiration date and path to ensure the cookies are accessible across your site.

function storeChunksInCookies(chunks, cookiePrefix = 'data_chunk_', expiresDays = 7) {
  const expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + expiresDays);
  const expiryString = expiryDate.toUTCString();

  chunks.forEach((chunk, index) => {
    const cookieName = `${cookiePrefix}${index}`;
    const encodedValue = encodeURIComponent(chunk);
    // Add Secure/SameSite attributes if needed for your use case
    document.cookie = `${cookieName}=${encodedValue}; expires=${expiryString}; path=/; SameSite=Lax`;
  });
}

3. Retrieve and Reassemble the Full String #

Scan all cookies, filter out the indexed chunks, sort them by index, decode each segment, and join them back into the original string.

function getFullStringFromCookies(cookiePrefix = 'data_chunk_') {
  const cookieList = document.cookie.split(';').map(cookie => cookie.trim());
  const chunkMap = new Map();

  cookieList.forEach(cookie => {
    const [name, value] = cookie.split('=');
    if (name.startsWith(cookiePrefix)) {
      const chunkIndex = parseInt(name.slice(cookiePrefix.length), 10);
      if (!isNaN(chunkIndex)) {
        chunkMap.set(chunkIndex, decodeURIComponent(value));
      }
    }
  });

  // Sort chunks by index and concatenate
  return Array.from(chunkMap.keys())
    .sort((a, b) => a - b)
    .map(key => chunkMap.get(key))
    .join('');
}

4. Clean Up Chunk Cookies #

A helper function to delete all indexed cookies when you no longer need the stored data.

function clearChunkCookies(cookiePrefix = 'data_chunk_') {
  const cookieList = document.cookie.split(';').map(cookie => cookie.trim());
  
  cookieList.forEach(cookie => {
    const [name] = cookie.split('=');
    if (name.startsWith(cookiePrefix)) {
      // Set expiry to a past date to delete the cookie
      document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    }
  });
}

// Create a test string larger than 4KB (5KB here)
const largeTestString = 'x'.repeat(5 * 1024);

// Split and store the string
const chunks = splitLargeString(largeTestString);
storeChunksInCookies(chunks);

// Retrieve and verify the full string
const retrievedString = getFullStringFromCookies();
console.log(retrievedString === largeTestString); // Should log true

// Clean up when done
// clearChunkCookies();

• Cookie Quantity Limits: Most browsers cap the number of cookies per domain (e.g., Chrome allows 50). If your string is extremely large and requires more chunks than this limit, this approach won't work.
• Encoding is Mandatory: Always use encodeURIComponent/decodeURIComponent to avoid parsing errors from special characters (like semicolons, spaces, or equals signs) in your data.
• Security Attributes: Add Secure (for HTTPS-only transmission) and SameSite=Strict (to prevent CSRF) attributes to your cookies if your application requires it.

内容的提问来源于stack exchange，提问作者dev4xy