如何将map循环生成的input的ID与数量存入localStorage？

开发电商网站的购物车系统，需要记录选中商品的ID和数量（通过input输入框），但当前代码仅能将ID存入localStorage，无法同时存储ID与数量。修改后代码出现异常，localStorage仅显示{{}}。

原有代码 #

商品列表生成代码 #

<!-- map方法循环生成商品列表的部分代码 -->
<div class="buttons">
  <input type="number" placeholder="0" id=${id} class="quantity">
  <button onclick="totalPrice(${id})"><i class="bi bi-cart-plus-fill"></i></button>
</div> 

存储数据代码 #

// 存储ID和数量到localStorage的代码
let totalPrice = (id) => {
    let selectedItem = id;
    let search = basket.find((x)=> x.id === selectedItem.id);
    if (search === undefined) {
        basket.push({
            id: selectedItem.id
        });
    } else {
        return;
    }
    localStorage.setItem("shopdata", JSON.stringify(basket));
};

修改后出错的代码 #

HTML部分 #

<div class="buttons">
  <input type="number" placeholder="0" id=${id} class="quantity">
  <button onclick="totalPrice(document.getElementById('${id}').value"><i class="bi bi-cart-plus-fill"></i></button>
</div>

JavaScript部分 #

let countGoods = (cardNumb) => {
    let value = parseInt(cardNumb) + 0;
    return value + "ea";
};

let totalPrice = (value) => {
    let selectedItem = value;
    let search = basket.find((x)=> x.value === selectedItem.value);
    if (search === undefined) {
        basket.push({
            quantity: selectedItem.value
        });
    } else {
        search.quantity = selectedItem.value
    }
    localStorage.setItem("shopdata", JSON.stringify(basket));
};

1. 语法错误：修改后的按钮onclick事件少了闭合括号，导致无法正确触发函数
2. 数据关联丢失：仅传递数量值，没有同时传递商品ID，无法将数量与对应商品关联
3. 匹配逻辑错误：用x.value查找购物车条目，但购物车对象中根本不存在value字段，应该用商品ID作为匹配标识
4. 初始化缺失：未从localStorage读取已有购物车数据，页面刷新后数据会丢失

商品列表生成HTML（修正后） #

<div class="buttons">
  <!-- 给input设置唯一ID避免冲突，同时设置最小数量和默认值 -->
  <input type="number" placeholder="1" id="quantity-${id}" class="quantity" min="1" value="1">
  <!-- 点击按钮时仅传递商品ID，后续通过ID获取数量 -->
  <button onclick="addToCart(${id})"><i class="bi bi-cart-plus-fill"></i></button>
</div>

JavaScript逻辑（修正后） #

// 初始化购物车：优先从localStorage读取已有数据，无数据则为空数组
let basket = JSON.parse(localStorage.getItem("shopdata")) || [];

// 加入购物车核心函数
let addToCart = (id) => {
    // 通过商品ID找到对应的数量输入框
    const quantityInput = document.getElementById(`quantity-${id}`);
    // 确保数量是有效数字，默认值设为1
    const quantity = parseInt(quantityInput.value) || 1;

    // 查找购物车中是否已存在该商品
    const existingItem = basket.find(item => item.id === id);

    if (existingItem) {
        // 已有商品则更新数量
        existingItem.quantity = quantity;
    } else {
        // 无该商品则添加新条目，同时存储ID和数量
        basket.push({
            id: id,
            quantity: quantity
        });
    }

    // 更新localStorage中的购物车数据
    localStorage.setItem("shopdata", JSON.stringify(basket));
};

1. 数据初始化：页面加载时从localStorage读取购物车数据，避免刷新后丢失
2. 关联商品与数量：点击按钮时传递商品ID，通过ID获取对应数量，确保数据一一对应
3. 有效数据存储：每个购物车条目同时包含id和quantity字段，满足需求
4. 容错处理：确保数量为有效数字，避免非数字输入导致的异常
5. 语法修复：修正按钮onclick的语法错误，保证函数正常触发

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