为何JS中使用赋值运算符(=)也能添加新的document.cookie？

我们知道执行console.log(typeof document.cookie);会输出string，直觉上会觉得要添加新Cookie得用+=拼接字符串，比如：

document.cookie += 'a=1;';
document.cookie += 'b=2;';
document.cookie += 'c=3;';
document.cookie += 'd=4;';

此时console.log(document.cookie);确实会输出a=1; b=2; c=3; d=4。

但直接赋值的写法同样能达到添加Cookie的效果：

document.cookie = 'a=1';
document.cookie = 'b=2';
document.cookie = 'c=3';
document.cookie = 'd=4';

执行console.log(document.cookie);依然输出a=1; b=2; c=3; d=4，这背后的原因是什么？

核心原因：document.cookie是访问器属性，读写行为被重写 #

document.cookie看起来是普通的字符串属性，但实际上它是访问器属性（Accessor Property），浏览器引擎为它定义了专门的读取（getter）和写入（setter）逻辑：

• 当你读取document.cookie时，getter会把当前所有Cookie按规则拼接成一个字符串返回给你，所以typeof才会显示string。
• 当你给document.cookie赋值时，setter不会直接替换整个属性值，而是会解析你传入的字符串：提取Cookie的键值对、过期时间、路径等属性，然后将这个新的Cookie添加到浏览器的Cookie存储中——只有当你赋值的Cookie键名已经存在时，才会覆盖该键对应的旧值，否则就是新增。

这种行为是HTML标准明确规定的，所有符合标准的浏览器都会按照这个逻辑处理document.cookie的赋值操作，并非某个浏览器的特殊实现。

内容的提问来源于stack exchange，提问作者Przemysław Długoszewski-Tamoń