localStorage订单存储后JSON.parse报错：SyntaxError问题求助

开发电商网站时，将订单存入localStorage的对象字符串中，订单已成功存储，但在购物车页面动态展示时，使用JSON.parse解析出现错误：

SyntaxError: JSON.parse: unexpected non-whitespace character

添加订单页面代码 #

const addOrder = (e) => {
e.preventDefault(); 
console.log("click");

let payload = {
  productName:productData.productName,
  // productId:productData.productId,
    price: +productData.productPrice,
    clientEmail: sessionStorage.getItem("user"),
    quantity: +formValues['quantity'],
    productColour: formValues['productColor'],
    size: +formValues['size']
}
let cart = localStorage.getItem('productsInCart');
if(!cart){
  console.log("Cart is empty");
  let array = [];
  let stringData = JSON.stringify(payload)
  array.push(stringData);
  localStorage.setItem('productsInCart',array);
}else{
  console.log("item in cart");
  console.log(cart);
  let data = [];
  data.push(cart);
  let stringData = JSON.stringify(payload)
  data.push(stringData);
  
  localStorage.setItem('productsInCart',data);
  console.log( localStorage.getItem('productsInCart'));
}
} 

购物车页面代码 #

const [orders, setOrders] = useState();
const [total, setTotal] = useState();
const [shipping, setShipping] = useState();
const [updateOrders, setUpdateOrders] = useState();

useEffect(()=>{
  
 let cartData =[];
    let productData = JSON.parse(localStorage.getItem('productsInCart'));
    console.log(productData);
    cartData.push(productData);

    // console.log(productData);
    console.log(cartData);
  
    
    let renderOrders = cartData.map((item) => <Orders productColour={item.productColour} quantity={item.quantity} price={item.price}  editRender={setUpdateOrders}/>)
    setOrders(renderOrders);
    setUpdateOrders(false);

  },[updateOrders]);

localStorage中的数据（无数组方括号） #

{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":2,"productColour":"pink","size":6},{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":1,"productColour":"pink","size":5},{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":2,"productColour":"purple","size":6},{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":1,"productColour":"blue","size":5},{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":2,"productColour":"pink","size":6},{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":2,"productColour":"pink","size":6}

问题根源 #

1. 存储逻辑错误：存储订单时，错误地将单个JSON字符串拼接成逗号分隔的对象序列，而非将整个订单数组转为JSON字符串存储。直接把数组存入localStorage时，数组会被自动转为逗号分隔的字符串（而非JSON数组格式），导致最终数据缺少数组方括号[]，不是合法的JSON格式。
2. 解析逻辑错误：购物车页面尝试解析非合法JSON格式的数据，自然抛出解析错误。

修复步骤 #

1. 修复添加订单的存储逻辑

每次添加订单时，先将localStorage中的现有数据解析为数组（无数据则初始化空数组），再将新订单对象加入数组，最后将整个数组转为JSON字符串存入localStorage：

const addOrder = (e) => {
  e.preventDefault(); 
  console.log("click");

  let payload = {
    productName: productData.productName,
    price: +productData.productPrice,
    clientEmail: sessionStorage.getItem("user"),
    quantity: +formValues['quantity'],
    productColour: formValues['productColor'],
    size: +formValues['size']
  };

  // 读取现有购物车数据，解析为数组（无数据则初始化空数组）
  let cart = localStorage.getItem('productsInCart');
  let cartArray = cart ? JSON.parse(cart) : [];

  // 将新订单对象加入数组
  cartArray.push(payload);

  // 将整个数组转为JSON字符串存入localStorage
  localStorage.setItem('productsInCart', JSON.stringify(cartArray));
  console.log(localStorage.getItem('productsInCart'));
};

2. 修复购物车页面的解析逻辑

解析后的productData已经是订单数组，直接使用该数组渲染即可，无需额外push到cartData：

const [orders, setOrders] = useState();
const [total, setTotal] = useState();
const [shipping, setShipping] = useState();
const [updateOrders, setUpdateOrders] = useState();

useEffect(()=>{
  // 读取并解析购物车数据
  let cartData = localStorage.getItem('productsInCart');
  let productData = cartData ? JSON.parse(cartData) : [];
  
  // 直接用订单数组渲染组件
  let renderOrders = productData.map((item) => (
    <Orders 
      productColour={item.productColour} 
      quantity={item.quantity} 
      price={item.price}  
      editRender={setUpdateOrders}
    />
  ));
  setOrders(renderOrders);
  setUpdateOrders(false);

},[updateOrders]);

验证修复效果 #

修复后，localStorage中的数据会变为标准的JSON数组格式（包含方括号[]），例如：

[{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":2,"productColour":"pink","size":6},{"productName":"Indoor Roller","price":2750,"clientEmail":"Chrissy@gmail.com","quantity":1,"productColour":"pink","size":5}]

此时JSON.parse可以正常解析数据，购物车页面能正确渲染订单。

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