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的第一个实例将保存。我想知道如何使用jquery nearest（）来解决我的问题。或者即使我的问题还有其他解决办法。

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));
});

如何使用localStorage将项目保存到购物车

1 个答案: