yaleksandr89
@yaleksandr89
PHP developer

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

Добрый день.
Помогите дорешать задачу, а то чего-то застрял. Само задание:
На страницу есть инпуты (в моем случае 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), что вполне логично, так как цикл переписывает значения всех полях.
  • Вопрос задан
  • 991 просмотр
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Так же, как значения собирали, можно их и восстановить:
// ...
    $('input').each(function (index) {
        $(this).val(decode[index]);
    });

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы