JavaScript实现购物车移除、保存、数量更新功能问题求助

我是编程新手，目前在做一个简易图书购物车页面：

本次需求是基于讲师提供的模板，实现灵活加入购物车、保存购物车内容、移除购物车商品功能。我们已经学习了页面加载、购物车渲染、加入购物车的逻辑，需要自主完成购物车保存、商品移除、数量更新、购物车总价更新功能。
我编写的代码目前可以实现点击移除按钮后，图书总数和总价同步更新，但对应商品条目仍保留在购物车页面中；同时我也没有找到保存购物车、数量更新功能的实现思路，无法独立完成开发，恳请大家提供相关建议，非常感谢。

修正后可运行完整代码 #

JavaScript代码 #

// 购物车作业
// 你可以用下面的默认数据初始化购物车，也可以自己定义数据
books = [
  {
    title: "Absolute Java",
    qty: 1,
    price: 114.95,
  },
  {
    title: "Pro HTML5",
    qty: 1,
    price: 27.95,
  },
  {
    title: "Head First HTML5",
    qty: 1,
    price: 27.89,
  },
];

onload = () => {
  // 检查localStorage里有没有保存的购物车数据
  var myCart = localStorage.getItem("myCart");
  if (myCart) {
    // 如果有就加载保存的数据
    books = JSON.parse(myCart);
  }
  buildCart();
  updateCount();
  updateTotal();

  let btnAdd = document.querySelector("#add");
  btnAdd.addEventListener("click", addItem);

  let btnSave = document.querySelector("#save");
  btnSave.addEventListener("click", saveCart);
};

const buildCart = () => {
  var tbody = document.querySelector("tbody");
  // 遍历的时候加索引，用来标识每个商品
  books.forEach((book, index) => {
    let str = `
        <tr>
            <td>
                <input class="title" value="${book.title}"/>
            </td>
            <td>
                <input class="qty" size="2" value="${book.qty}" onchange="updateQty(${index}, this.value)"/>
            </td>
            <td>
                <input size="2" value="${book.price}"/>
            </td>
            <td>${book.price}</td>
            <td>${updateLineTotal(book)}</td>
            <td>
            <button onclick="removeItem(${index})">
                移除
            </button>
            </td>
        </tr>
    `;
    tbody.innerHTML += str;
  })
};

const addItem = () => {
  let book = {
    title: "Crazy Cool CSS",
    qty: 1,
    price: 34.95,
  };
  books.push(book);
  // 新增商品后清空现有表格重新渲染，避免重复绑定问题
  document.querySelector("tbody").innerHTML = '';
  buildCart();
  updateCount();
  updateTotal();
};

// 保存购物车功能
const saveCart = () => {
  localStorage.setItem("myCart", JSON.stringify(books));
  alert("购物车已保存");
};

const updateCount = () => {
  document.querySelector("#count").innerHTML = books.length;
};

const updateTotal = () => {
  var total = 0;
  for (let book of books) {
    total += book.price * book.qty;
  }
  document.querySelector("#total").innerHTML = total.toFixed(2);
};

const updateLineTotal = (book) => {
  return (book.price * book.qty).toFixed(2);
};

// 移除商品功能
const removeItem = (index) => {
  // 删除数组对应下标的商品
  books.splice(index, 1);
  // 重新渲染购物车
  document.querySelector("tbody").innerHTML = '';
  buildCart();
  updateCount();
  updateTotal();
};

// 数量更新功能
const updateQty = (index, newQty) => {
  newQty = parseInt(newQty) || 1;
  newQty = Math.max(1, newQty);
  books[index].qty = newQty;
  document.querySelector("tbody").innerHTML = '';
  buildCart();
  updateTotal();
};

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>图书购物车</title>
    <meta charset="UTF-8" />
    <script src="cart.js"></script>
    <link rel="stylesheet" href="cart.css" />
  </head>
  <body>
    <table>
      <caption>
        <b>我的图书</b>
      </caption>
      <thead>
        <tr>
          <th>书名</th>
          <th>数量</th>
          <th>单价</th>
          <th>单价（元）</th>
          <th>行小计</th>
          <th>总价（元）<span id="total"></span></th>
        </tr>
      </thead>
      <tbody></tbody>
      <tfoot>
        <tr>
          <td colspan="3">
            <button id="add">新增商品</button>
          </td>
          <td colspan="3">
            <button id="save">保存购物车</button>
          </td>
        </tr>
      </tfoot>
    </table>
    <b>商品数量 : <span id="count">0</span></b>
  </body>
</html>

核心修正点说明 #

1. 移除了重复的id="remove"属性，改用索引标识每个商品，点击移除时直接删除数组对应位置的元素，再重新渲染整个购物车表格，解决条目不消失的问题
2. 保存功能直接把当前购物车数组序列化后存入localStorage，刷新页面会自动读取
3. 给数量输入框绑定change事件，修改后同步更新数组内的商品数量，再重新渲染页面完成总价更新

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