JavaScript报错：Cannot read properties of null (reading 'length')修复咨询

核心错误点 #

• 变量名拼写错误：addtoCart函数里误用了未定义的giohang数组做push操作，实际定义的购物车数组是cart，导致商品根本没被加入购物车，sessionStorage里的购物车数据始终为空。
• 未处理sessionStorage为空的边界情况：当还没添加过商品时，sessionStorage.getItem("cart")返回null，JSON.parse(null)得到null，直接访问cart.length就会触发"Cannot read properties of null"的类型错误。
• 初始化未同步已有数据：页面加载时没有从sessionStorage读取已存的购物车数据到cart变量，导致数据无法跨页面持久化。

具体修复代码 #

1. 修正addtoCart函数 #

// 初始化时优先读取sessionStorage中的购物车数据，无数据则设为空数组
var cart = JSON.parse(sessionStorage.getItem("cart")) || [];

function addtoCart(x){
    var sach = x.parentElement.children;
    var name = sach[0].innerText;
    var prc = sach[2].children[0].innerText;
    var img = x.parentElement.previousElementSibling.children[0].src;

    var prd = [img, name, prc];
    cart.push(prd); // 修正变量名，使用正确的cart数组
    sessionStorage.setItem("cart", JSON.stringify(cart));
    alert('Added!')
}

2. 修正showCart函数 #

function showCart(){
    var gh = sessionStorage.getItem("cart");
    // 为空时默认赋值空数组，避免null报错
    var cart = JSON.parse(gh) || [];
    var info = "";
    for(let i = 0; i < cart.length; i++){
        info += '<tr>'+
                '    <td><img src="'+cart[i][0]+'" width="120px" height="150px"></td>'+
                '    <td>'+cart[i][1]+'</td>'+
                '    <td>'+cart[i][2]+'</td>'+
                '</tr>';
    }
    // 先确认DOM元素存在再赋值，避免额外错误
    const showcartElement = document.getElementById("showcart");
    if(showcartElement){
        showcartElement.innerHTML = info;
    }
}
showCart();

额外优化建议 #

• 用数组字面量[]替代new Array()，代码更简洁规范。
• 给商品添加唯一ID字段，防止重复添加相同商品时生成多条重复记录。
• 可以在购物车为空时显示"购物车为空"的提示文本，提升用户体验。

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