使用 JavaScript/jQuery 更新 localStorage 项目？

Question

我很抱歉一直问这个问题，但我真的很挣扎，我无法弄清楚出了什么问题，我已经阅读了无数的 SO 页面和一般的互联网搜索，但没有运气。一些人在这里帮助了我，但值更新不正确，所以我认为最好在我最近的试验中提出一个新问题。

挑战是基于localStorage 创建一个客户端（仅限）模拟遛狗应用程序，到目前为止，我能够在浏览器中添加、删除和查看约会。我还设置了一个编辑功能，但是当我点击提交（#edit）时，无论我尝试编辑哪个索引，[x]（结束索引）位置的值都会更新。这是我在 localStorage 中的“预订”键下存储数组的示例：

[0]{fname: "John", lname: "Smith"}
[1]{fname: "Jane", lname: "Doe"}
[2]{fname: "David", lname: "Miller"}

例如，当我在 John Smith 上点击编辑时，它将替换 David Miller 的值，而不是 Johns 的详细信息。我想尝试找到每个人的索引，类似于我在确定要在HTML（bookings[i].lname）中显示的值时所做的操作，但是这会引发错误，指出i cannot be used before initialisation（有道理，但不确定如何解决它）。

这是我最近的 JS：

// ~~~ add bookings to localStorage

var bookings = JSON.parse(localStorage.getItem("bookings")) || [];

window.onload = showBooking();


$("#submit").click(function() {
    var newBookings = {
        fname: $('#fname').val(),
        lname: $('#lname').val()
    }
    bookings.push(newBookings);

    var json = JSON.stringify(bookings);
    window.localStorage.setItem("bookings", json);
    showBooking();
});


// ~~~ edit bookings in localStorage

$(document).on('click','#edit',function (e) {
    e.preventDefault();

    var parent_form = $(this.form);

    var fname = parent_form.find('.input:eq(0)').val();
    var lname = parent_form.find('.input:eq(1)').val();

    const i = bookings.findIndex(booking => bookings.fname == fname && bookings.lname == lname);

    deleteBooking(i);

    bookings.push({
        fname,
        lname
    });

    var json = JSON.stringify(bookings);
    window.localStorage.setItem("bookings", json);

    //    showBooking();

});


// ~~~ display bookings in browser

function showBooking() {
    var bookingResult = document.getElementById("result");
    var ul = document.createElement("ul");
    bookingResult.innerHTML = "";
    for (let i = 0; i < bookings.length; i++) {
        bookingResult.innerHTML += `<div class="card card-body bg-light  m-4"> 
<h3>${bookings[i].fname + " " + bookings[i].lname} 
<button onclick="deleteBooking(${i})" class="btn btn-danger text-light ">Delete</button>
<button onclick="editBooking(${i})" class="btn btn-danger text-light ">Edit</button>
</h3>                            
</div>`;
    }
}

// ~~~ edit bookings in browser

function editBooking(i) {
    //  $('#regForm').hide();
    $('#result').hide();
    var currentItem = document.getElementById("currentItem");
    var editBooking = document.getElementById("editAppt");


    currentItem.innerHTML += `<div class="card card-body bg-light  m-4"> 
<h3>${bookings[i].fname + " " + bookings[i].lname} </h3>                            
</div>`;

    editBooking.innerHTML = `<input type="text" class="input" id="fname_${i}" placeholder="${bookings[i].fname}" name="${bookings[i].fname}" value="${bookings[i].fname}" required>
<input type="text" class="input" id="lname_${i}" placeholder="${bookings[i].lname}" name="${bookings[i].lname}" value="${bookings[i].lname}" required>
<input id="edit" type="submit" value="Edit">`;

}

// ~~~ delete bookings from localStorage

function deleteBooking(i) {
    bookings.splice(i, 1);
    localStorage.setItem("bookings", JSON.stringify(bookings));
    showBooking();
}

我用于创建约会的表单（调用editBooking 时会发生变化）：

<form id="regForm" name="regForm" action="" class="col-sm-6">

    <div id="editAppt" class="row">
        <input type="text" class="input" id="fname" placeholder="First Name" name="fname" required>
        <input type="text" class="input" id="lname"placeholder="Last Name" name="lname" required>
        <input id="submit" type="submit" value="Submit">
    </div>

</form>

Answer 1

您需要为每个约会分配一个唯一标识符。这将有助于解决您的问题，因为您目前正在通过他们的名字、姓氏和在数组中的位置来识别约会。

当您编辑约会时，它会将其从当前位置移除并添加到末尾，这会更改导致您的问题的所有当前元素的索引。

如果您有两个同名的约会，这也会导致问题。

对于唯一标识符，我建议现在使用new Date().getTime()。

var newBookings = {
    id: new Date().getTime(),
    fname: $('#fname').val(),
    lname: $('#lname').val()
}

为每个约会分配唯一标识符后，您可以更改“编辑”按钮，使其如下所示：

<input data-id="${bookings[i].id}" id="edit" type="submit" value="Edit">

然后在您的 Edit 事件处理程序中，更改底部部分，使其看起来像这样：

let i = bookings.findIndex(booking => booking.id == $(this).data("id"));

bookings[i].fname = fname;
bookings[i].lname = lname;

var json = JSON.stringify(bookings);
window.localStorage.setItem("bookings", json);

所以要解释一下，为每个约会分配一个唯一标识符，将id 存储在data-id 属性中，检索data-id，找到具有该id 的约会索引，更新约会属性，保存预订。

---

如果你还想提高代码的可读性，我建议不要混合使用原生 JavaScript 和 jQuery，即 document.getElementById("result") 可以是 $("#result")