Next.js使用js-cookie存JSON对象到Cookie显示[object Object]如何解决？

问题原因 #

Cookie 仅支持存储字符串类型的值，你直接将 JS 对象传入 Cookie.set() 方法时，会自动调用对象的 toString() 方法，最终就会得到 "[object Object]" 的存储结果，和你之前的推测完全一致。

解决方案 #

1. 存储时序列化对象 #

修改你设置 Cookie 的代码，存储用户数据前先通过 JSON.stringify() 将对象转为 JSON 字符串：

console.log(res2)
Cookie.set('user', JSON.stringify(res2.user));
Cookie.set('token', res2.token);
router.push('/dashboard/')

2. 读取时反序列化字符串 #

后续读取用户数据时，需要通过 JSON.parse() 将存储的 JSON 字符串转回 JS 对象才能正常使用：

const user = JSON.parse(Cookie.get('user'))
const token = Cookie.get('token')

额外注意事项 #

• 浏览器单条 Cookie 最大容量为 4KB，不要存入过多的用户字段，避免超出容量限制
• 如果用户信息包含敏感数据，不建议明文存在前端可读写的 Cookie 中，可选择仅用 Cookie 存储 Token，用户信息通过 Token 调用接口从服务端获取，或者存入加密后的本地存储
• 如果需要在 Next.js 服务端（getServerSideProps 等场景）读取该用户 Cookie，同样需要做 JSON 反序列化处理

内容的提问来源于stack exchange，提问作者Nxt Invent Solutions