如何将网站Cookie弹窗的用户决策（含已同意供应商）存储为单个Cookie

第一步：设计统一的结构化存储内容 #

因为要把全局选择、供应商单独授权结果存在同一个Cookie里，首先要把所有决策内容规整成固定结构的JSON对象，既避免零散存储占用多个Cookie，也要严格控制内容大小不超出单Cookie 4KB的通用大小限制，防止写入失败：

• 固定结构包含三类核心字段：
  • 全局决策字段：记录用户点击的「接受」/「拒绝」/自定义选择状态，值可设为accept/reject/custom
  • 授权供应商列表字段：只存JSON供应商源里每个供应商的唯一短ID，不要把供应商名称、描述、隐私政策链接这类长文本塞进Cookie
  • 决策时间戳字段：记录用户完成选择的时间，方便后续校验Cookie有效期
• 注意：如果供应商数量较多，要给每个供应商分配短长度的唯一标识，避免序列化后的内容超出Cookie大小限制导致写入失败。

第二步：匹配弹窗交互场景生成存储内容 #

针对弹窗的三类用户操作，分别生成对应的结构化内容，统一序列化后写入同一个Cookie：

• 用户点击「接受」全局按钮：全局决策字段设为accept，从JSON源提取全部供应商的唯一ID存入授权供应商列表，时间戳取当前操作时间
• 用户点击「拒绝」全局按钮：全局决策字段设为reject，清空授权供应商列表为空数组，时间戳取当前操作时间
• 用户手动勾选/取消单独供应商授权后触发保存：全局决策字段设为custom，仅将用户主动勾选的供应商ID存入授权列表，时间戳取当前操作时间

第三步：执行Cookie写入配置 #

把生成的结构化JSON对象做编码处理后，按照合规要求配置Cookie参数完成写入：

• 用JSON.stringify()把对象转成字符串，再通过encodeURIComponent做编码，避免特殊字符影响Cookie解析
• Cookie的基础参数配置：
  • 路径设为/，保证全站所有页面都能读取到用户的授权状态
  • 有效期按照合规要求设置（一般为6个月），到期后自动重新弹出弹窗征询用户意见
  • 开启SameSite=Lax属性，降低跨站请求的安全风险
  • HTTPS站点需额外开启Secure属性，保证Cookie仅通过加密连接传输

参考实现示例：

// 组装用户决策数据
const finalConsent = {
 globalStatus: currentGlobalSelect,
 vendorAllowList: currentSelectedVendorIds,
 updateTime: Date.now()
}
// 编码后写入单个Cookie
document.cookie = `siteCookieConsent=${encodeURIComponent(JSON.stringify(finalConsent))}; path=/; max-age=15552000; SameSite=Lax; Secure`

落地注意事项 #

• 读取Cookie时增加容错逻辑：如果解析存储的JSON字符串失败、或者Cookie过期，直接重新展示弹窗征询用户选择，不要默认授予授权
• 定期校验Cookie大小：如果序列化后的内容超过4KB，就对供应商ID做精简处理，删除非必要的存储字段

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