如何用localStorage保存商品到购物车？解决重复ID的行数据获取问题

嘿，这个问题我之前也碰到过——核心原因是你在HTML里重复使用了相同的ID（Book_Title和Author），这可是违反HTML规范的哦！ID必须是页面唯一的，所以浏览器只会返回第一个匹配该ID的元素，这就是为什么只有第一行数据能被保存的原因。

下面我用jQuery的closest()方法来帮你解决这个问题，同时顺便修复ID重复的bug：

第一步：先修正你的HTML结构 #

首先把重复的ID去掉，我们完全不需要依赖ID来获取行内数据，直接通过按钮所在的行来定位就好：

<table border="1">
  <tbody>
    <tr>
      <th> Book Title </th>
      <th> Author </th>
      <th> Book </th>
    </tr>
    <tr>
      <td>Gone</td>
      <td>Micheal Grant</td>
      <td><button class="addToCartBtn">Add To Cart</button></td>
    </tr>
    <tr>
      <td>The Knife of never letting go</td>
      <td>Ryan Howard</td>
      <td><button class="addToCartBtn">Add To Cart</button></td>
    </tr>
  </tbody>
</table>

这里我把按钮的ID改成了类addToCartBtn，这样就能给所有按钮统一绑定事件了，同时删掉了重复的单元格ID——毕竟它们现在没用了。

第二步：用jQuery写事件处理逻辑 #

核心思路就是：当点击按钮时，用closest('tr')找到当前按钮所在的表格行，然后从这一行里提取书名和作者：

$(document).ready(function() {
  $('.addToCartBtn').click(function() {
    // 从当前按钮出发，向上找最近的<tr>，也就是它所在的那一行
    const $currentRow = $(this).closest('tr');
    
    // 从行里拿数据：第一个td是书名，第二个是作者，trim()去掉多余空格
    const bookTitle = $currentRow.find('td').eq(0).text().trim();
    const bookAuthor = $currentRow.find('td').eq(1).text().trim();
    
    // 把数据打包成对象
    const bookItem = {
      title: bookTitle,
      author: bookAuthor
    };
    
    // 保存到localStorage——这里用数组存多本书，避免覆盖之前的内容
    let cart = JSON.parse(localStorage.getItem('bookCart')) || [];
    cart.push(bookItem);
    localStorage.setItem('bookCart', JSON.stringify(cart));
    
    console.log('已添加到购物车:', bookItem);
  });
});

为什么这个方案靠谱？ #

• $(this).closest('tr')：这个方法会从当前点击的按钮开始，向上遍历DOM树，找到最近的<tr>元素，精准定位到按钮所在的那一行，完全不会和其他行混淆。
• 用类绑定事件：相比重复ID，类是为多个元素设计的，用它来绑定事件既符合规范，又能减少冗余代码。
• 基于行内位置取数据：只要你的表格结构不变，不管有多少行，都能准确拿到对应列的数据，不用再担心ID重复的问题。

另一个可选方案（可读性更强） #

如果你觉得按索引取数据不够直观，也可以给单元格加类名（注意是类，不是ID！），然后通过类名来获取数据：

<!-- 修改后的单元格 -->
<td class="book-title">Gone</td>
<td class="book-author">Micheal Grant</td>

对应的JavaScript代码就可以改成这样：

const bookTitle = $currentRow.find('.book-title').text().trim();
const bookAuthor = $currentRow.find('.book-author').text().trim();

这样代码可读性更高，以后表格结构如果调整列的位置，只要类名不变，代码就不用改啦。

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