javascript - 使用纯 JS 获取输入、添加到页面并存储在 localStorage 中

Question

我一直在尝试让一些代码正常工作。当前的任务是:

首先，创建一个表单来获取用户数据，如下所示:

<form>
    <fieldset>
        <label id="namefield">Name</label>
        <input type="text" name="firstlast" id="username">
        </br>
        <label id="address">Address</label>
        <input type="text" name="address" id="useraddress">
        </br>
        <label id="emailfield">Email</label>
        <input type="email" name="email" id="useremail">
        </br>
        <button type="submit" id="submit">Save</button>
    </fieldset>
</form>

其次，编写 Javascript:

1. 创建一个包含数组的 JSON 对象。
2. 创建一个数据对象来存储用户输入。
3. 创建 onclick 函数以:
   1. 从每个表单字段获取值。
   2. 使用所述值构造一个新对象。
   3. 将对象插入 JSON 对象数组。
   4. 将新数据添加到页面。
4. 将数据存储在 localStorage 中。
5. 检查页面加载时的 localStorage 并将数据写入页面(如果找到)。

JS:

// create data structure
var addressBook = {"entries": []}  // this should be JSON array object

// create data object to contain form data
function AddressBookEntry(name, address, email) {
    this.name = name;
    this.address = address;
    this.email = email;
}

// create onclick function for button
document.getElementById("submit").onclick = function() {
    // get values from each form field
    var name = document.getElementById("username").value;
    var address = document.getElementById("useraddress").value;
    var email = document.getElementById("useremail").value;

    // create new object using consturctor
    var newAddress = new AddressBookEntry(name, address, email);
    var jAddress = JSON.stringify(newAddress);

    // push new object into array
    addressBook.push(jAddress);
    localStorage.setItem("addressBook", JSON.stringify(addressBook));

    // add information to page

    // write data to the page

    // store the data

    // read from storage and write to page if data found

我能够创建 JSON 对象，从表单获取数据并将其放入构造函数中以创建一个新对象，然后将其转换为 JSON 对象，但我无法让该对象传递到数组，此时一切都崩溃了。

我错过了什么？

Answer 1

我认为你需要做的是addressBook.entries.push(jAddress)。

AddressBook 是对象类型而不是数组