javascript - 如何使用 localStorage 将商品保存到购物车

Question

所以我有一个像这样的表:

<table border="1">
<tbody>
    <tr>
        <th> Book Title </th>
        <th> Author </th>
        <th> Book </th>
    </tr>
    <tr>
        <td id= Book_Title>Gone </td>
        <td id= Author>Micheal Grant</td>
        <td><button id="AddToCart" onclick="addToLocalStorage()">Add To Cart</button> </td>
    </tr>
    <tr>
        <td id= Book_Title>The Knife of never letting go</td>
        <td id= Author>Ryan Howard</td>
        <td><button id="AddToCart" onclick="addToLocalStorage()">Add To Cart</button> </td>
    </tr>
</tbody>

我的目标是单击按钮即可将特定行的数据保存到本地存储。但是，由于每行的 id 都相同，因此只会保存 id 的第一个实例。我想知道如何使用 jqueryclosest() 来解决我的问题。或者即使有任何其他解决方案可以解决我的问题。

Answer 1

为了保存表行中包含的数据...例如书名和作者，我建议您使用一些objects包含在 array 中.

那么你必须stringify使用前localStorage .

当您想要检索存储的数据时，您必须 parse它返回到对象数组。

遗憾的是，SO 片段不喜欢使用 localStorage...所以我的工作演示位于 CodePen .

相关代码如下:

// The "add to cart" handler.
$("table").on("click", ".AddToCart", function(e){

  // Get previous storage, if any.
  var storage = JSON.parse(localStorage.getItem("cart"));
  if(storage==null){
    storage = [];
  }

  var row = $(this).closest("tr");
  var title = row.find("td").eq(0).text().trim();
  var author = row.find("td").eq(1).text().trim();

  // Create an object to store.
  var data = {author:author,title:title};
  storage.push(data);

  // Store it.
  localStorage.setItem("cart",JSON.stringify(storage));
});