Как сохранить данные из inputs в localStorage и потом распаковать

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

let inputs = document.querySelectorAll('input');

function saveLocalData(inputs) {
  for (let elem of inputs) {
    let arr = [];
    elem.addEventListener('change', function() {
      let obj = this.value;
      arr.push(obj);
    });
    localStorage.setItem('key', JSON.stringify(arr));
  }
}

function openLocalData(inputs) {
  window.addEventListener('load', function() {
    let decod = JSON.parse(localStorage.getItem('key'));
    decod.forEach(function(elem) {
      inputs.value = elem;
    });
  });
}


Ответы (1 шт):

Автор решения: Vadim

Создай asd.html и вставь туда:

<html lang="en"><head>
    <script>
        window.onload=()=>{
            const inputs = document.querySelectorAll('input');
            for(const input of inputs){
                input.value = localStorage[`input_${input.name}`] || '';
                input.addEventListener('change', function(){
                    localStorage[`input_${this.name}`] = this.value;
                });
            }
        };
    </script>
</head><body>
    <input type="text" name="msg1" placeholder="Message 1">
    <input type="text" name="msg2" placeholder="Message 2">
    <input type="text" name="msg3" placeholder="Message 3">
</body></html>
→ Ссылка