JavaScript购物车单个商品删除后localStorage未同步问题

核心问题分析 #

你的代码中，eliminarProductoLocalStorage方法里的productoLS.id === productoID存在类型不匹配的可能：

• productoID是通过getAttribute('data-id')获取的字符串类型
• 若productoLS.id是存入localStorage时的数字类型，全等比较===会因类型不同返回false，导致无法触发splice删除操作，刷新后商品自然重新出现

修复方案 #

方案1：统一类型后再比较 #

将productoID转换为和productoLS.id一致的数字类型（若商品ID为数字）：

eliminarProductoLocalStorage(productoID) {
    let productosLS;
    productosLS = this.obtenerProductosLocalStorage();
    // 转换productoID为数字类型，与productoLS.id类型统一
    const idNum = parseInt(productoID);
    productosLS.forEach(function (productoLS, index) {
        if (productoLS.id === idNum) {
            productosLS.splice(index, 1);
        }
    });
    localStorage.setItem('productos', JSON.stringify(productosLS));
}

方案2：使用非全等比较== #

若无需严格类型检查，可改用==自动处理类型差异：

eliminarProductoLocalStorage(productoID) {
    let productosLS;
    productosLS = this.obtenerProductosLocalStorage();
    productosLS.forEach(function (productoLS, index) {
        // 使用==代替===，忽略类型差异进行比较
        if (productoLS.id == productoID) {
            productosLS.splice(index, 1);
        }
    });
    localStorage.setItem('productos', JSON.stringify(productosLS));
}

额外检查点 #

1. 确认obtenerProductosLocalStorage方法返回正确数组：

obtenerProductosLocalStorage() {
    let productosLS;
    // 当localStorage无数据时返回空数组，避免后续forEach报错
    if(localStorage.getItem('productos') === null) {
        productosLS = [];
    } else {
        productosLS = JSON.parse(localStorage.getItem('productos'));
    }
    return productosLS;
}

若该方法返回非数组，forEach会报错，导致存localStorage的逻辑执行失败。

2. 验证eliminarProducto中productoID的获取逻辑：
   确保producto.querySelector('a')存在且带有data-id属性，避免获取到null或空值。

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