JSON.stringify转对象存Cookie失败的解决方案咨询

问题场景 #

将JSON对象通过JSON.stringify()转为字符串后，能正常存入localStorage，但使用js-cookie或react-cookie设置Cookie时完全失败，无法写入。原始JSON数据包含非ASCII字符（如土耳其语特殊字符），相关代码及数据如下：

原始数据：

{"alias":"TestName","name":"Test","image":"sadasdasd3213","modules":["Community","InternalCommunication","Interest","Event","SelfService","FileSharing","SkillSet"],"id":2,"userAgreements":[{"id":"BA3909CC-2393-4CB9-AA52-178E2001A06B","url":"https://www.google.com.tr/docs/abcd.pdf","displayName":"Çerez Aydınlatma Metni"},{"id":"834657C3-0802-471C-8699-41A4D76977FA","url":"https://www.google.com.tr/docs/abcd.pdf","displayName":"Üyelik Sözleşmesi ve Kullanım Koşulları"},{"id":"27F11B55-4427-4C66-953C-70627E781B09","url":"https://www.google.com.tr/docs/abcd.pdf","displayName":"Aydınlatma Metni"}],"isConnectedToSso":true,"alertCount":0,"portal":{"portalLogo":"21321asfdasf3","id":3,"companyId":2,"portalName":"LIFE","portalLink":"https://www.google.com.tr/"},"isOtpProcess":true,"fontColor":"313384","backgroundColor":"313384","surveyLastDayValue":7}

示例代码：

const testData = JSON.stringify(response.singleData)
localStorage.setItem("alias", JSON.stringify(response.singleData)); // 存入localStorage正常
Cookies.set('czn', JSON.stringify({data : response.singleData}) , { expires: 1 }) // js-cookie包，无法生效
setCookie('alias', testData,{ path: '/' }); // react-cookie包，无法生效

核心原因分析 #

1. Cookie大小限制：浏览器对单个Cookie的大小限制通常为4KB左右，若JSON字符串长度超过这个阈值，写入会静默失败。
2. 非ASCII字符编码问题：JSON字符串中包含土耳其语特殊字符（如Ç、Ü），直接存入Cookie时，部分浏览器或Cookie库可能因字符编码不兼容导致写入失败。
3. Cookie属性冲突：虽然示例中设置了path: '/'，但如果存在secure、sameSite等属性设置不当（比如HTTPS环境下未设置secure，或sameSite值与当前环境不匹配），也可能导致写入失败。

可行解决方案 #

方案1：Base64编码处理非ASCII字符 #

对JSON字符串进行Base64编码后再存入Cookie，读取时解码，解决特殊字符兼容性问题：

js-cookie实现：

// 编码并存入Cookie
const jsonStr = JSON.stringify(response.singleData);
// 处理Unicode字符，避免btoa报错
const encodedData = btoa(encodeURIComponent(jsonStr));
Cookies.set('czn', encodedData, { expires: 1, path: '/' });

// 读取并解码
const storedEncoded = Cookies.get('czn');
if (storedEncoded) {
  const decodedStr = decodeURIComponent(atob(storedEncoded));
  const data = JSON.parse(decodedStr);
}

react-cookie实现：

import { useCookies } from 'react-cookie';

const [cookies, setCookie] = useCookies(['alias']);

// 编码并存入
const jsonStr = JSON.stringify(response.singleData);
const encodedData = btoa(encodeURIComponent(jsonStr));
setCookie('alias', encodedData, { 
  path: '/', 
  expires: new Date(Date.now() + 24 * 60 * 60 * 1000) // 1天后过期
});

// 读取解码
const storedData = cookies.alias ? JSON.parse(decodeURIComponent(atob(cookies.alias))) : null;

方案2：检查并压缩JSON字符串 #

如果是因为Cookie大小超限：

• 先计算JSON字符串长度：console.log(JSON.stringify(response.singleData).length)，确认是否接近或超过4096字节。
• 若超限，可通过移除不必要的字段、使用JSON压缩库（如lz-string）压缩后再存入，读取时解压。

示例（使用lz-string）：

import LZString from 'lz-string';

// 压缩并存入
const compressed = LZString.compressToUTF16(JSON.stringify(response.singleData));
Cookies.set('czn', compressed, { expires: 1, path: '/' });

// 读取解压
const stored = Cookies.get('czn');
const data = JSON.parse(LZString.decompressFromUTF16(stored));

方案3：调整Cookie属性 #

确保Cookie属性与当前环境匹配：

• 若在HTTPS环境下，添加secure: true属性（开发环境HTTP下不要加，否则无法写入）。
• 设置sameSite: 'Lax'或sameSite: 'None'（需配合secure），避免跨域或浏览器安全策略拦截：

// HTTPS环境下的js-cookie设置
Cookies.set('czn', encodedData, { 
  expires: 1, 
  path: '/', 
  secure: true, 
  sameSite: 'None' 
});

注意事项 #

• Base64编码会使字符串长度增加约33%，因此要确保编码后总长度不超过4KB限制。
• 部分旧浏览器对btoa/atob支持有限，若需兼容，可使用第三方Base64库替代。
• 敏感数据不建议存入Cookie，优先使用localStorage或后端会话存储，避免安全风险。

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