Question

每次用户在文本框中输入信息时，我要保存他们输入的所有内容以创建人员对象数组并使用本地存储保存它们。例如，如果用户输入姓名：James，职业：doctor和姓名：Sam，Occupation：nurse，则数组将为

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

在第二页上，我将为每个人创建一个单独的div，在其中显示每个人的图像，以及表单页中的所有数据（类似于年鉴）。我知道5种方法是setItem（），getItem（），removeItem（），clear（）和key（）。但是，每次用户填写表单时，我都无法开始使用本地存储部分并在数组中创建新对象。我不确定每次填写表单时如何继续保存所有数据，将数据保存在本地存储中，然后在第二页上检索该本地存储数据以在div中使用。到目前为止，这是我的代码：

HTML（FORM PAGE）

<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>

在多个页面上的表单上使用本地存储

1 个答案: