document.cookie 可以一次存储多个吗？

今天发现老项目里一个cookie存储的问题，代码是这样的

document.cookie = 'id=' + id + 'userName=' + userName + ';path=/;domain=' + domain;

乍看上去，好正常……

一看cookie存储的结果……

呃…………  不见了userName的踪迹

查了一些资料，包括官方文档：Document.cookie - Web API 接口参考 | MDN (mozilla.org)

因此，这个问题的答案是 不可以！

那怎么实现存多个呢？多写一行不就行了？上面项目的代码改为：

document.cookie = 'id=' + id + ';path=/;domain=' + domain;
document.cookie = 'userName=' + userName + ';path=/;domain=' + domain;

两个cookie就都存上了，有小伙伴会问，这样存十个八个的，代码不好看啊

下面给出两个方案：

方案一：

将各个cookie项合到一个对象里，存进去不就行了，例如可以这样：

const userInfo = {
	id: id,
	userName: userName,
	avatar: avatar
}
document.cookie = 'userInfo=' + JSON.stringify(userInfo) + ';path=/;domain=' + domain;

上面的方案仅适用于调用的时候，可能统一在一处使用的场景，那如果调用场景到处都是的话，有的小伙伴问，会不会有点消耗资源，其实消耗很小，本身cookie里也没必要放很多的东西是吧？

方案二：

封装一个类或方法，把那么多行的代码变成一行不就行了，下面以方法为例封装一下这个批量存储cookie的方法

function setCookies(data, path, domain) {
	// FIXME 这里可以判断data是否为对象，兼容单个存储cookie的行为
	// 对另外两个参数做处理
	path = path ? ';path=' + path : '';
	domain = domain ? ';domain=' + domain : '';
	for(item in data) {
	    document.cookie = encodeURIComponent(item) + '=' + encodeURIComponent(JSON.stringify(data[item])) + path + domain;
	}
}

// 调用示例
const data = {
	id: id,
	userName: userName,
	avatar: avatar
}
setCookies(data, '/');

当然，这只是简单写了一下，cookie支持的例如过期时间啊什么的都没写进去，大家可以再补充，甚至封装成类会更好

祝大家玩的开心！本次分享结束！