localStorage存储parseJwt返回对象显示[object Object]无法解析怎么办

• localStorage 仅支持存储字符串类型数据，无法直接存储JavaScript对象
• 直接将parseJwt返回的解析对象传入setItem时，JS会自动调用对象的toString()方法做隐式类型转换，普通对象调用该方法的固定返回值就是[object Object]，这就是存储内容显示异常的直接原因
• 存入的[object Object]不符合JSON语法规范，后续调用JSON.parse()解析时自然会报错，无法读取正确内容

• 控制台正常打印解析后的JWT对象：
  
• localStorage异常存储效果：
  

localStorage.setItem('response', parseJwt(JSON.stringify(response.data.token)));
console.log(parseJwt(JSON.stringify(response.data.token)));

额外代码问题：parseJwt方法本身接收原始JWT字符串作为入参，你这里给response.data.token额外套了一层JSON.stringify()属于多余操作，会导致传入的参数是带额外引号的字符串，可能引发parseJwt解析异常。

存储前手动将解析后的JWT对象序列化为标准JSON字符串，读取时再反序列化为对象即可：

// 存储逻辑修正
const parsedJwtData = parseJwt(response.data.token); // 直接传原始token，不要套JSON.stringify
localStorage.setItem('response', JSON.stringify(parsedJwtData)); // 手动序列化对象为JSON字符串再存
console.log(parsedJwtData);

// 其他组件读取逻辑
const storedData = localStorage.getItem('response');
const jwtData = storedData ? JSON.parse(storedData) : null; // 反序列化得到原始对象

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