Использование локального хранилища с формами на нескольких страницах

Question

Каждый раз, когда пользователь вводит информацию в текстовые поля, я хочу сохранить все, что они ввели, чтобы создать массив объектов лиц и сохранить их с помощью локального хранилища. Например, если пользователь вводит имя: Джеймс, профессия: доктор и имя: Сэм, профессия: медсестра, то массив будет

var person = [
{name:"James",
 occupation: "doctor"
},
{name:"Sam"
 occupation: "nurse"
];

На второй странице я сделаю отдельный div для каждого человека, отобразить изображение для каждого человека внутри, и все данные со страницы формы (аналогично ежегоднику). Я знаю, что 5 методов: setItem (), getItem (), removeItem (), clear () и key (). Но у меня возникают проблемы с началом работы с локальной частью хранилища и созданием нового объекта в массиве каждый раз, когда пользователь заполняет форму. Я не уверен, как сохранять все данные каждый раз при заполнении формы, сохранять данные в локальном хранилище, а затем извлекать данные локального хранилища на второй странице для использования в div. Вот мой код:

HTML (ФОРМА СТРАНИЦЫ)

<form onsubmit="return myFunction();">
  <table>
    <tr>
      <p>Name: </p>
      <td><input id="name" type="text" /></td>
    </tr>
      <tr>
      <p>Occupation: </p>
      <td><input id="occupation" type="text" /></td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="submit" value="Save" />
        </div>
      </td>
    </tr>

  </table>
</form>

JAVASCRIPT

function myFunction() {
var name = document.getElementById("name").value;
var occupation = document.getElementById("occupation").value;

  if (name == "") {
    alert("You forgot to enter your name!");
  }
if (occupation == "") {
    alert("You forgot to enter your occupation!");
  }
}

Примечание: I Я не уверен, что это можно сделать с помощью jQuery или других языков, но я использую только Javascript.

Answer 1

Вы можете проверить форму, используя myFunction, и, если форма проверена, вы можете добавить содержимое формы в массив localstorage JSON.

        function myFunction() {
            var fname = document.getElementById("name").value;
            var foccupation = document.getElementById("occupation").value;

            if (fname == "") {
               alert("You forgot to enter your name!");
               document.getElementById("name").focus();
               return false;
            }
            else if (foccupation == "") {
               alert("You forgot to enter your occupation!");
               document.getElementById("occupation").focus();
               return false;
            }
            else {
                // get array called "pepple" from local storage and then add to it
                var allPeople = JSON.parse(localStorage.getItem("people"));
                console.log(allPeople);

                if(allPeople===null) {
                     // first time - the array is not in the localstorage yet
                     allPeople = {items:[{name:fname, occupation:foccupation}]};                        
                }
                else {
                    allPeople.items.push({name:fname, occupation:foccupation});
                }

                //console.log(allPeople);
                localStorage.setItem("people", JSON.stringify(allPeople) );

                // go to next page
                document.location = "page2.html";
                return false;
            }
            return false;

        }   

На следующей странице может быть такой div -

<div id="allpeopledisplay"></div>

и javascript для заполнения таким же образом.

        <script>
            var allPeople = JSON.parse(localStorage.getItem("people"));

            var allPeopleDiv = document.getElementById('allpeopledisplay');

            console.log(allPeople);
            console.log(allPeople.items.length);
            for(var i = 0; i < allPeople.items.length; i++) {
                var person = allPeople.items[i];
                console.log(person);                        
                allPeopleDiv.innerHTML += "<div>Name: "+person['name']+"<br/>Occupation: "+person['occupation']+"<hr></div>";

            }  
        </script>