使用localStorage实现购物车时遇TypeError: array.push不是函数问题

你遇到的TypeError: updatedShoppingCartArray.push is not a function错误，核心原因是localStorage里存储的shoppingCart是单个对象，而非数组，导致JSON.parse后得到的是一个对象，而对象没有push方法。

问题根源 #

看你的测试代码：

let prepTesting = {
   name: "Tshirt: Enter the Red Dragon",
   price: 3225,
   qty: 1
};
localStorage.setItem("shoppingCart", JSON.stringify(prepTesting));

这里直接把单个对象存进了shoppingCart，当后续执行updatedShoppingCartArray = JSON.parse(localStorage.getItem("shoppingCart"))时，updatedShoppingCartArray是一个对象，不是数组，自然调用push会报错。

另外，你的首次添加逻辑也有问题：第一次添加时，你存的是单个itemToAdd对象，而非包含该对象的数组，这会导致后续添加同样触发错误。

修复方案 #

统一shoppingCart的存储格式为数组，不管是首次添加还是后续追加，都保持数组结构：

1. 首次添加时，把itemToAdd放进数组再存储
2. 后续读取时，确保解析后得到的是数组（如果是旧的单个对象，兼容转换为数组）

修改后的完整代码 #

// 模拟localStorage中的初始数据：改为数组格式
let prepTesting = [{
   name: "Tshirt: Enter the Red Dragon",
   price: 3225,
   qty: 1
}];
localStorage.setItem("shoppingCart", JSON.stringify(prepTesting));


// 获取页面元素
let order_item_name = document.getElementById('order_item_name');
let order_item_price = document.getElementById('order_item_price');
let order_item_qty = document.getElementById('order_qty');

// 初始化按钮
const btn_addToCart = document.getElementById('btn_addToCart');
const btn_clrLocalStorage = document.getElementById('btn_clrLocalStorage');

// 组装要添加的商品对象
let itemToAdd = {
   name: order_item_name.dataset.name,
   price: parseInt(order_item_price.dataset.price),
   qty: parseInt(order_item_qty.value)
};

function clrLS(e) {
   e.preventDefault();
   localStorage.clear();
   location.reload();
}

function addToCart(e) {
   e.preventDefault();

   let shoppingCart = localStorage.getItem("shoppingCart");

   if (shoppingCart === null) {
      // 首次添加：存数组格式
      localStorage.setItem("shoppingCart", JSON.stringify([itemToAdd]));
   } else {
      let updatedShoppingCartArray = JSON.parse(shoppingCart);
      
      // 兼容旧数据：如果解析后是单个对象，转为数组
      if (!Array.isArray(updatedShoppingCartArray)) {
         updatedShoppingCartArray = [updatedShoppingCartArray];
      }

      // 追加新商品
      updatedShoppingCartArray.push(itemToAdd); 
      
      // 更新localStorage
      localStorage.setItem("shoppingCart", JSON.stringify(updatedShoppingCartArray));
   }
}

btn_addToCart.addEventListener('click', addToCart);
btn_clrLocalStorage.addEventListener('click', clrLS);

关键修改点 #

• 初始测试数据改为数组格式，确保存储结构统一
• 首次添加时，将itemToAdd包裹在数组中存储
• 增加数组校验逻辑，兼容可能存在的旧单个对象数据
• 移除了不必要的localStorage.clear()，直接覆盖存储即可

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