iOS端Safari/Chrome浏览器中JavaScript Cookie失效问题求助

我来帮你排查这个跨端Cookie兼容性的坑——这种在其他设备正常，唯独iOS Safari/Chrome掉链子的情况，大多是WebKit内核对Cookie参数的特殊处理导致的。结合你的代码，我整理了几个关键修复点：

1. 移除无效的domain参数 #

你的代码里手动设置了domain=空字符串，这在WebKit（iOS Safari/Chrome的内核）里会被判定为无效值，直接导致Cookie无法被持久化存储。正确的做法是不设置domain参数，让浏览器自动使用当前域名：

修改后的bake_cookie函数：

function bake_cookie(name, value) {
  const date = new Date();
  date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
  const cookie = [
    name, '=', JSON.stringify(value),
    '; path=/',
    '; expires=' + date.toUTCString()
  ].join('');
  document.cookie = cookie;
}

对应的delete_cookie函数也要同步移除domain参数，确保能正确匹配并删除目标Cookie：

function delete_cookie(name) {
  document.cookie = [
    name, '=; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/'
  ].join('');
}

2. 检查Cookie的大小限制 #

单个Cookie的最大容量通常是4KB（4096字节），你存储的是数组对象，JSON序列化后可能会超出这个限制。可以在控制台执行以下代码，查看序列化后的内容大小：

console.log(JSON.stringify(yourShoppingListArray).length);

如果接近或超过4096，建议改用localStorage存储——它的容量更大（一般5MB），在iOS设备上的兼容性也更稳定，代码改动也很小：

// 存储购物清单
localStorage.setItem('shoppingList', JSON.stringify(yourShoppingListArray));
// 读取购物清单
const shoppingList = JSON.parse(localStorage.getItem('shoppingList') || '[]');
// 删除购物清单
localStorage.removeItem('shoppingList');

3. 排查iOS隐私设置干扰 #

虽然可能性较低，但可以让用户检查iOS的隐私设置：

• 打开「设置」→「Safari浏览器」→「隐私与安全性」
• 确保没有开启「阻止所有Cookie」，「智能跟踪预防」设置为默认（而非「严格」）

额外提示：验证Cookie是否正确写入 #

可以在浏览器控制台执行document.cookie，查看当前所有Cookie的内容，确认你的购物清单Cookie是否存在且值正确。如果还是为空，大概率是参数设置问题或者容量超限。

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