Перебор данных HTML-формы через массивы / объекты JSON?

#javascript #arrays #json #local-storage

#javascript #массивы #json #локальное хранилище

Вопрос:

Я уже несколько часов просматриваю этот веб-сайт и Интернет и задал вопрос ранее, который продвинул меня по крайней мере на шаг вперед.. Однако я действительно пытаюсь понять, как сохранить несколько массивов в my localStorage .

Я могу понять процесс, используя жестко запрограммированный массив, но как только я пытаюсь реализовать localStorage данные, я не могу понять, что делать.

Вот что я пробовал до сих пор (с помощью другого пользователя SO):

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

    // prepare
    var formData = $("#regForm").serializeArray();
    // get all stored as Array []
    var bookings = JSON.parse(localStorage.getItem('bookings') || '[]');

    for (formData = 0; formData < localStorage.length; formData  ) {
    // insert and save
    localStorage.setItem("bookings", JSON.stringify([formData]));
    }
    
});

Он отлично работает без цикла for, однако, когда я повторно отправляю форму с новыми данными, она заменяет ее, а не создает новый индекс?

По сути, я пытаюсь создать планировщик встреч для выгула собак, и мне нужно иметь возможность просматривать каждое бронирование, изменять, удалять и, конечно, просматривать заказы (все на стороне клиента — без баз данных).

Должен ли я сначала инициализировать свой массив? Как мне подойти к циклу for? Любая помощь приветствуется, поскольку я хочу учиться, но я занимался этим часами, но безуспешно.

1. Не существует такого понятия, как «объект JSON» (или «Массив JSON»)

2. Хорошо ..? Это то, что я их знаю, и я новичок в этом. У вас есть какие-либо решения?

3.Цикл не имеет никакого смысла. Вы перезаписываете formData 0 , а затем вызываете .setItem() localStorage.length times всегда с одним и тем же ключом ( bookings ) и сохраняете [ <current value of formData> ] как его содержимое.

4. Найдите способ хранения всех назначений структурированным способом (например, в виде массива). Если вы нашли подходящее решение, вы можете сохранить эту «вещь» (которая может быть массивом объектов или объектом <something> ) localStorage только одним вызовом .setItem("bookings", JSON.stringify(<"thing">))

5. Спасибо, я это понимаю, но я не уверен, как это реализовать, я могу получить одну запись, но затем, если я создам новую запись, она заменит старую запись. Я знаю, что мой код неверен, но я просто хотел показать свое мышление / работу в надежде, что кто-нибудь сможет помочь.

Ответ №1:

Вы можете использовать следующее. Сохраните новые значения в ранее сохраненных значениях в переменной и обновите локальное хранилище в конце.

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

    var formData = $("#regForm").serializeArray();
    var bookings = JSON.parse(localStorage.getItem('bookings') || '[]');
   
    for (formData = 0; formData < localStorage.length; formData  ) {
        bookings.push(formData)   
    }
    localStorage.setItem("bookings", JSON.stringify(bookings));
});