Как поместить элементы массива в input?

Question

[Aleksandr Yurchenko]

Добрый день.
Помогите дорешать задачу, а то чего-то застрял. Само задание:

На страницу есть инпуты (в моем случае 3шт.), есть кнопка. По клику данные из инпутов добавляются в localStorage. А при перезагрузке страницы, надо, что бы введенные данные вернулись в инпуты.

Первую часть (добавление в хранилище) сделал без проблем:

$('.getData').on('click', function (event) {
    event.preventDefault();
    let array = [];
    $('input').each(function () {
        let value = $(this).val();
        array.push(value);
    });
    localStorage.setItem('task7', JSON.stringify(array));
});

А вот со второй частью возникала проблема. Как заставить значения занимать свои места, то есть если в инпуты я указывал (и в последствие собрал в массив) 111, 222, 333. Как вернуть их на свои места. Пробовал через

$(window).on('load', function () {
    let decode = JSON.parse(localStorage.getItem('task7'));
    decode.forEach(function (element) {
        $('input').val(element);
    });
});

Но все поля инпут получают значения последнего. До перезагрузки (111,222,333), После перезагрузки (333,333,333), что вполне логично, так как цикл переписывает значения всех полях.

Comments

[FeST1VaL]

как вариант дать инпутам атрибуты data-id="1", data-id="2", data-id="3" и их вместе записывать, а потом уже доставать и сопоставлять id инпута с инпутом)

[Aleksandr Yurchenko]

Артем Будин, Артем Будин, хотел сразу же так и сделать. После получения из хранилища разбить строку и присваивать каждому инпуту соответствующий элемент массива. Но вроде как на костыль смахивает :)

[Andrew]

Aleksandr Yurchenko, вам в любом случае придётся как-то их хранить.
Я бы вообще оставил всё в массиве и отображал как угодно(тем же списком).
И все манипуляции бы проходили в этом массиве( запись его)
Или вам нужно взаимодествие с пользователем?

[Aleksandr Yurchenko]

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

Answer 1

[Сергей Соколов]

Так же, как значения собирали, можно их и восстановить:

// ...
    $('input').each(function (index) {
        $(this).val(decode[index]);
    });

Код в вопросе ещё сырой — если в LS ничего нет будет ошибка.

jQuery.each() в коллбэк передаёт параметром индекс: 0, 1, 2, ... И если разметка документа не менялась, можно надеяться, что порядок найдённых input'ов будет тот же, что и при сохранении значений. Способ не гарантирует попадание значения в нужный input, но в простом случае упражнения сработает.

Более по-взрослому будет дать input'ам уникальные id и сохранять их вместе со значениями. При восстановлении обращаться к элементам по id.

Comments

[Aleksandr Yurchenko]

А ведь я собирал данные той же функцией. Не догадался, что обратный процесс можно сделать её. Спасибо!

Более по-взрослому будет дать input'ам уникальные id и сохранять их вместе со значениями. При восстановлении обращаться к элементам по id.

А могли бы объяснить. Вот разметка html

spoiler

<input id="id1" type="text">
<input id="id2" type="text">
<input id="id3" type="text">
<button type="button" class="getData">Получить все данные</button>

Первая часть задачи тоже не вызывает проблем, добавляю в хранилище не только значения но id элементов:

spoiler

$('.getData').on('click', function (event) {
    event.preventDefault();
    let array = [];
    $('input').each(function () {
        let id = $(this).attr('id');
        let value = $(this).val();
        array.push({id, value});
    });
    localStorage.setItem('task7', JSON.stringify(array));
});

А вот обратно появляются сложности

spoiler

$(window).on('load', function () {
    let decode = JSON.parse(localStorage.getItem('task7'));
    $('input').each(function (id, value) {
       console.log(id);
       console.log(value); 
       //$(this[id]).val(decode[value]);
    })
});

Подскажите, как получить id из хранилища, как понял

let decode = JSON.parse(localStorage.getItem('task7'));

уже не достаточно?

[Сергей Соколов]

Aleksandr Yurchenko, в массив теперь попадают объекты со свойствами id и value

const decoded = JSON.parse(localStorage.getItem('task7'));
if (decoded) {
  decoded.forEach(item => {
    const el = document.getElementById(item.id); // input по его id
    if (el) el.value = item.value; // если нашёлся, ставим его значение
  })
} else {
  console.log("LS пока не содержит данных");
}

[Aleksandr Yurchenko]

Сергей Соколов, Сделал по аналоги на jquery (уж начал на неё фигачит, мешать с нативным не захотел), все получилось. Спасибо за объяснение!!

$(window).on('load', function () {
    let decoded = JSON.parse(localStorage.getItem('task7'));
    $.each(decoded, (item, value) => {
        let getId = value.id;
        let getValue = value.value;

        let getInput = $('input#' + getId);
        if (getInput) {
            getInput.val(getValue);
        }else {
            console.log('localStorage пуст!');
        }
    });
});

[Сергей Соколов]

Aleksandr Yurchenko, названия аргументов запутывают. Лучше тогда уж хоть так:

$.each(decoded, (i, item) => {
  const {getId, getValue} = item;

[Aleksandr Yurchenko]

Точно! Спасибо.