Блог

Мне удалось зарегистрировать данные в моих localStorage массивах as, однако у меня есть три запроса:

1. Почему вокруг моего массива двойные квадратные скобки?
2. Как мне изменить name поле на соответствующий HTML-идентификатор?
3. Данные возвращаются, undefined когда я пытаюсь извлечь их из localStorage ?

Результат, который я ищу в моем localStorage :

 bookings: [
           [0]{fname: "John", lname: "Smith" }
           [1]{fname: "Jane", lname: "Doe" }
          ]
 

Но в настоящее время я получаю:

 bookings: [
           [0][{name: "fname" value: "John"},{name: "lname": value: "Smith" }]
           [1][{name: "fname" value: "Jane"},{name: "lname": value: "Doe" }]
          ]
 

Я понимаю, как изменить значение имени, когда элементы жестко запрограммированы, но я инициализирую пустой массив в своем JS и не уверен, где ошибка, я попытался присвоить значение массиву [0], но тогда он ничего не регистрирует. Я также пробовал data.flat() метод, который ничего не делает.

Проблема в том, что мой следующий шаг — изменить и удалить элементы, поэтому мне нужно попытаться понять структуру. В настоящее время я становлюсь неопределенным, когда пытаюсь получить данные из хранилища, я предоставил свою функцию удаления (в настоящее время для показа) ниже, я знаю, что это неправильно, но я думаю, что проблема связана с тем, как я храню данные. Извините, что я задал так много вопросов по этому поводу, но я новичок в JS и все еще учусь. Я борюсь с поиском, поскольку существует так много вариантов Javascript, и получаю много ответов, касающихся C # или Python, что не помогает.

Вот мой код:

 //var bookings = []; 
var bookings = localStorage.getItem("bookings");

$("#submit").click(function () {

    //bookings = JSON.parse(localStorage.getItem("bookings")) || [];
    bookings = (bookings) ? JSON.parse(bookings) : [];
    var newBooking = $("#regForm").serializeArray();

    bookings.push(newBooking)

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

$("#remove").click(function () {
    var strBookings;
    var i;

    strBookings = localStorage.getItem("bookings");
    //document.write("<p>"   strBookings   "</p>");

    bookings = JSON.parse(strBookings);
    for (i = 0; i < strBookings.length; i  ) {
        document.write("<p>"   strBookings[i].value   "</p>");
    }
    //localStorage.removeItem('bookings');
});
 

Форма

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

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

</form>
 

Показать

 //var bookings = []; 
var bookings = localStorage.getItem("bookings");

$("#submit").click(function () {

    //bookings = JSON.parse(localStorage.getItem("bookings")) || [];
    bookings = (bookings) ? JSON.parse(bookings) : [];
    var newBooking = $("#regForm").serializeArray();

    bookings.push(newBooking)

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

$("#remove").click(function () {
    var strBookings;
    var i;

    strBookings = localStorage.getItem("bookings");
    //document.write("<p>"   strBookings   "</p>");

    bookings = JSON.parse(strBookings);
    for (i = 0; i < strBookings.length; i  ) {
        document.write("<p>"   strBookings[i].value   "</p>");
    }
    //localStorage.removeItem('bookings');
}); 

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

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

    </form>

   <button id="remove" value="Remove">Show</button>