为什么JSON.stringify/parse在if判断中操作localStorage时报错？

问题原因 #

• 最核心的高频诱因是你此前在当前站点的localStorage中存储过非合法JSON格式的fruits值，比如直接执行过localStorage.setItem('fruits', 'apple')这类未经过JSON序列化的操作，当代码执行到JSON.parse(localStorage.getItem('fruits'))时，解析非法JSON会直接抛出语法错误，导致后续逻辑中断。
• 小概率场景为浏览器开启了隐私模式、或者禁用了当前站点的本地存储权限，导致localStorage读写操作被拦截抛出异常。

解决步骤 #

1. 清理已存储的非法值 #

打开Chrome开发者工具的「应用」面板，找到「本地存储」分类下的当前站点条目，找到fruits项右键删除即可。

2. 优化代码增加容错处理 #

给JSON解析逻辑增加try...catch包裹，同时增加数组类型校验，避免因存储值异常导致整段代码崩溃，优化后代码如下：

const friends = ["john","peter","bob"];
localStorage.setItem("friends", JSON.stringify(friends));

const values = JSON.parse(localStorage.getItem("friends"));
console.log(values[2]);
// console.log(values[1]);
// console.log(values[2]);

let fruits;
console.log(fruits);

if (localStorage.getItem('fruits')) {
  try {
    fruits = JSON.parse(localStorage.getItem('fruits'));
    // 校验解析结果是否为数组，避免非数组值导致push报错
    if (!Array.isArray(fruits)) {
      fruits = [];
    }
  } catch (err) {
    // 解析失败时直接重置为空数组
    fruits = [];
  }
} else {
  fruits = [];
}

console.log(fruits);
fruits.push("apple");
fruits.push("orange");
localStorage.setItem("fruits", JSON.stringify(fruits));

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