Chrome/Edge中Cookie无法在本地及服务器环境保存的问题排查

1. 未对Cookie值进行URL编码 #

JSON字符串中可能包含空格、引号等特殊字符，直接赋值给document.cookie会导致Cookie设置失效——浏览器要求Cookie值必须是URL编码后的格式。

修复代码：
修改saveCartToCookie和loadCartFromCookie函数，增加编码/解码步骤：

const shoppingCart = [];

function saveCartToCookie() {
  const cartJSON = JSON.stringify(shoppingCart);
  console.log("Saving cart to cookie:", cartJSON);
  // 对Cookie值进行URL编码
  const encodedCart = encodeURIComponent(cartJSON);
  document.cookie = `shoppingCart=${encodedCart}; path=/`;
}

function loadCartFromCookie() {
  const cookieData = document.cookie.split(';').find(cookie => cookie.trim().startsWith('shoppingCart='));
  if (cookieData) {
    const cartJSON = cookieData.split('=')[1];
    // 解码Cookie值
    const decodedCart = decodeURIComponent(cartJSON);
    console.log("Loading cart from cookie:", decodedCart);
    shoppingCart.length = 0;
    shoppingCart.push(...JSON.parse(decodedCart));
  }
}

2. Cookie大小超出限制 #

浏览器对单个Cookie的大小限制通常是4KB，如果购物车商品过多，JSON字符串长度超过这个阈值，Cookie会直接设置失败。

排查与替代方案：

1. 先打印JSON长度确认是否超限：

console.log("Cart JSON length:", cartJSON.length);

2. 若长度接近或超过4096，改用localStorage（最大支持5MB存储空间）：

// 改用localStorage保存购物车
function saveCartToStorage() {
  const cartJSON = JSON.stringify(shoppingCart);
  localStorage.setItem('shoppingCart', cartJSON);
}

function loadCartFromStorage() {
  const cartJSON = localStorage.getItem('shoppingCart');
  if (cartJSON) {
    shoppingCart.length = 0;
    shoppingCart.push(...JSON.parse(cartJSON));
  }
}

3. 浏览器Cookie权限限制 #

• 检查浏览器是否开启了「阻止所有Cookie」或「仅允许必要Cookie」，暂时允许当前站点的Cookie后测试是否恢复正常。
• Github Pages环境下默认是HTTPS，无需担心HTTP环境的Cookie限制，但如果是自定义域名，确认证书配置正常。

4. 确认脚本执行时机 #

虽然日志能打印，但要确保saveCartToCookie是在商品添加到购物车后立即调用的。可以把初始化逻辑绑定到DOM就绪事件中，避免执行时机异常：

document.addEventListener('DOMContentLoaded', function() {
  // 页面加载时加载购物车
  loadCartFromCookie();
  // 示例：绑定添加商品按钮事件
  document.getElementById('add-to-cart-btn')?.addEventListener('click', function() {
    // 添加商品到购物车的逻辑
    shoppingCart.push({id: 1, name: "测试商品"});
    // 保存到Cookie
    saveCartToCookie();
  });
});

5. 检查Cookie是否被覆盖 #

打开浏览器开发者工具的Application > Cookies面板，实时查看shoppingCartCookie的变化，确认是否有其他脚本或操作修改/覆盖了该Cookie。

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