今天发现老项目里一个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支持的例如过期时间啊什么的都没写进去,大家可以再补充,甚至封装成类会更好
祝大家玩的开心!本次分享结束!