将本地存储与多个页面上的表单一起使用

Question

每次用户在文本框中输入信息时，我都想保存他们输入的所有内容以创建人员对象数组并使用本地存储保存它们。例如，如果用户输入姓名：James，职业：医生和姓名：Sam，职业：护士，那么数组将是

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!");
  }
}

注意：我不确定这是否可以使用 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>