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

Get Input, Add to Page, and Store in localStorage with Pure JS

本文关键字：JS 存储 localStorage 添加输入获取更新时间：2023-09-26

我试图让一些代码工作。手头的任务是：

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

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

创建包含数组的 JSON 对象。
创建用于存储用户输入的数据对象。
创建点击函数以：
1. 从每个表单域中获取值。
2. 使用上述值构造一个新对象。
3. 将对象推送到 JSON 对象数组中。
4. 将新数据添加到页面。
将数据存储在本地存储中。
在页面加载时检查本地存储并将数据写入页面（如果找到）。

.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 对象，但我无法将此对象传递给数组，此时一切都崩溃了。

我错过了什么？

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

地址簿的类型是对象而不是数组

您正在尝试将（）推送到 addressBook，您将其定义为一个包含数组（条目）的对象。尝试：

addressBook.entries.push( newAddress );

请注意，您不需要字符串化newAddress即可将其添加到数组或localStorage中。在地址簿上使用 JSON.stringify（）就足够了。

我已将您的 onclick 处理程序包装到一个函数中，该函数在页面加载时触发，以确保表单提交对象在尝试添加事件处理程序之前存在。您可以在浏览器脚本调试器中运行该页，以测试数组中的输出。

这是一个完整的测试：

<html>
<head>
<script type="text/javascript">

// create data object to contain form data
function AddressBookEntry(name, address, email) {
    this.name = name;
    this.address = address;
    this.email = email;
}
function go(){
    // create data structure
    var addressBook = {entries:[]};  // this should be JSON array object
    // 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.entries.push(newAddress);
        localStorage.setItem("addressBook", JSON.stringify(addressBook));
        // add information to page
        // write data to the page
        console.log(addressBook);
        // store the data
        // read from storage and write to page if data found
        return true;
    }
    } 
</script>
</head>
<body onload="go()">
    <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>
</body>
</html>