Vue2使用vue-cookies存储多用户偏好时非首位用户Cookie更新失效问题

问题根因 #

你遇到的问题90%以上是以下两个原因导致的：

1. Cookie大小超限：浏览器对单条Cookie的大小限制通常为4KB（约4096字节），如果你的usersCookie序列化后字符串长度超过该阈值，浏览器会直接静默拒绝写入，不会抛出任何报错。当你存储第二位用户时，如果偏好字段（尤其是wallpaper字段如果存储的是base64格式的图片）占用体积较大，很容易触发该限制，导致更新失败。
2. Cookie写入参数不一致：vue-cookies的set/remove方法要求如果要操作已存在的Cookie，必须传入和创建时完全一致的path、domain参数，否则会在不同路径/域名下生成同名的新Cookie，浏览器会优先读取路径匹配度更高的旧Cookie，导致看起来更新没有生效。

解决方案 #

第一步：先排查大小超限问题 #

在updatePreferences方法中打印序列化后的字符串长度，确认是否超过4096字节：

const updatedData = JSON.stringify(globalPreferences)
console.log('序列化后长度：', updatedData.length) // 超过4096就是大小超限

如果确认是大小超限，优先推荐以下方案：

• 优先方案：放弃用Cookie存储偏好数据，改为存储在localStorage中，Cookie仅留存用户身份标识。偏好数据按照用户ID独立存储，键名格式用user_preferences_${userId}，完全没有4KB的大小限制，读写性能也更好。
• 兼容方案：如果必须使用Cookie存储，不要把wallpaper等字段存为base64格式，改为存储资源的URL地址，大幅降低数据体积。

第二步：统一Cookie操作参数 #

所有操作usersCookie的地方，都显式指定path和domain参数，避免参数不匹配导致的写入失败：

// 写入时统一加path和domain参数
this.$cookies.set('users', JSON.stringify(users), 604800, '/', window.location.hostname)

// 删除时也要带同样的参数
this.$cookies.remove('users', '/', window.location.hostname)

可选优化 #

你代码中的splice操作是冗余的，currentUser是globalPreferences数组中对应对象的引用，直接修改currentUser的属性就已经同步修改了globalPreferences的内容，可以删掉globalPreferences.splice(userIndex, 1, currentUser)这行代码。

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