购物车开发中localStorage内Array.push报错的问题排查与修复

这个报错Uncaught TypeError: cart.push is not a function的核心原因是你尝试在非数组类型的变量上调用push方法，具体来说有这几个问题：

1. 初始判断逻辑完全失效 #

你一开始写的if (cart != [])根本起不到判断作用——在JS里，两个空数组[] != []会返回true（因为它们是内存中不同的引用），所以这个判断永远为真。更关键的是，当localStorage里还没有cart数据时，JSON.parse(localStorage["cart"])会返回null，这时候cart就变成了null，而非数组。

2. addToCart函数缺少数组兜底逻辑 #

在addToCart函数中，你直接尝试解析localStorage里的cart，但如果是第一次添加商品，localStorage['cart']不存在，JSON.parse会返回null，这时候cart是null，自然调用不了push方法。

修复后的完整代码 #

// 初始化购物车数组：优先从localStorage取，不存在则设为空数组
let cart = JSON.parse(localStorage.getItem('cart')) || [];

$('#addtocart').on('click', function(e) {
    e.preventDefault(); // 防止按钮默认行为（比如表单提交导致页面刷新）
    const qty = document.getElementById("p-qty").value;
    // 假设productid是你已经定义好的商品ID变量
    const product = {
        id: productid,
        name: document.getElementById("nomenclature").textContent,
        price: document.getElementById("productprice").textContent,
        quantity: parseInt(qty) // 把输入框的字符串转成数字，方便后续购物车计算
    };
    addToCart(product);
    // 可选：跳转到购物车页面
    // window.location = "html/cart.html"
});

function addToCart(product) {
    if (localStorage) {
        // 双重保险：再次确认cart是数组
        cart = JSON.parse(localStorage.getItem('cart')) || [];
        cart.push(product);
        localStorage.setItem('cart', JSON.stringify(cart));
    }
}

关键修复点说明 #

• 数组初始化兜底：用JSON.parse(localStorage.getItem('cart')) || []，如果localStorage里没有cart数据，就默认赋值为空数组，彻底避免null的情况。
• 规范操作localStorage：使用localStorage.getItem/setItem标准方法，比直接用localStorage["cart"]更稳妥，能避免一些隐式错误。
• 数量类型转换：把输入框的字符串数量转成数字类型，后续计算购物车总价、数量时不会出问题。
• 阻止默认行为：添加e.preventDefault()，防止按钮是表单提交按钮时，还没存完数据就刷新页面。

内容的提问来源于stack exchange，提问作者e.iluf