所以我有一个像这样的表:
<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() 来解决我的问题。或者即使有任何其他解决方案可以解决我的问题。
最佳答案
为了保存表行中包含的数据...例如书名和作者,我建议您使用一些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));
});
关于javascript - 如何使用 localStorage 将商品保存到购物车,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50311972/