Angular 2解析localStorage报错：Unexpected token o语法错误

嘿，这个错误我太熟了！咱们来一步步拆解问题所在：

错误原因 #

这个报错的核心问题是：你正在尝试用JSON.parse()解析一个已经是JavaScript对象的内容，而不是标准的JSON字符串。

因为localStorage只能存储字符串类型的数据——如果你当初往LOCAL_TOKEN_KEY里存数据的时候，直接存了一个对象（比如没做JSON.stringify()转换），浏览器会自动把这个对象转成"[object Object]"这个字符串。当你再用JSON.parse()去解析这个字符串时，它的第一个字符就是字母o，完全不符合JSON格式，自然就抛出这个错误了。

解决方案 #

1. 先修正存数据的代码
   确保你存token的时候，用JSON.stringify()把对象转成字符串：

   // 存数据的正确写法
   localStorage.setItem('LOCAL_TOKEN_KEY', JSON.stringify(yourTokenObject));
   

2. 清理已存的无效数据
   现在浏览器里已经存了错误格式的数据，先在控制台执行这句清除掉：

   localStorage.removeItem('LOCAL_TOKEN_KEY');
   

   之后重新触发存数据的逻辑，就能存入正确的JSON字符串了。

3. 优化读取代码（增加容错）
   为了避免后续再出现类似问题，可以给读取逻辑加个判断和异常捕获：

   ngOnInit(){
     const tokenStr = localStorage.getItem('LOCAL_TOKEN_KEY');
     if (tokenStr) {
       try {
         const token = JSON.parse(tokenStr);
         console.log('Member Info: ', token);
       } catch (error) {
         console.error('解析Token失败:', error);
         // 自动清理无效数据
         localStorage.removeItem('LOCAL_TOKEN_KEY');
       }
     } else {
       console.log('未找到存储的Token');
     }
   }
   

快速验证方法 #

你可以先在浏览器控制台输入这句，看看当前存储的内容是什么：

localStorage.getItem('LOCAL_TOKEN_KEY')

如果输出是"[object Object]"，那就坐实了是存数据时没转字符串的问题；如果是正常的JSON字符串，那再检查其他逻辑即可。

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