如何解决localStorage无法保存表格Quantity输入框值的问题？

我一眼就看出问题出在哪儿了——你获取Quantity输入框值的方式不对！

问题根源 #

你现在用 row.find("td").eq(2).text().trim() 来获取数量，但 <td class="Quantity"> 里面嵌套的是一个 <input> 输入框。text() 方法只能读取元素的纯文本内容，而输入框的用户输入内容是存在它的value属性里的，所以用text()自然拿不到值，只会得到空字符串。

解决办法 #

把获取quantity的代码改成直接读取input的value值：

var quantity = row.find(".Quantity input").val().trim();

这样就能准确拿到用户在输入框里填写的数量了。

如果想让代码更健壮，还可以加个简单的校验，确保数量是有效的数字（比如不能是空值或者非数字）：

var quantityInput = row.find(".Quantity input");
var quantity = quantityInput.val().trim();
// 若为空或非数字，默认设为1并同步回输入框
if (!quantity || isNaN(Number(quantity))) {
    quantity = "1";
    quantityInput.val("1");
}

修改后的完整AddToCart函数 #

$("table").on("click", ".AddToCart", function(e){ 
    // 获取已有的购物车存储（如果有的话）
    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(); 
    // 修改：读取input的value值
    var quantityInput = row.find(".Quantity input");
    var quantity = quantityInput.val().trim(); 

    // 可选：添加数量有效性校验
    if (!quantity || isNaN(Number(quantity))) {
        quantity = "1";
        quantityInput.val("1");
    }

    // 创建要存储的商品对象
    var data = {author:author,title:title,quantity:quantity}; 
    storage.push(data); 
    // 存入localStorage
    localStorage.setItem("cart",JSON.stringify(storage)); 
});

额外小建议 #

• 你表格的第二行里，Quantity对应的标签写成了<th>，建议统一改成<td>，保持表格结构的一致性，避免后续选择元素时出问题。
• 给input添加type="number"属性，限制用户只能输入数字，提升交互体验：<input type="number" min="1">

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