Question

您好，并提前感谢您的帮助！作为一个小背景，我对这个领域相当新（我的问题很明显），我目前正在接受培训，进入我公司的部门。他们给我的第一个培训项目是创建一个单页电话簿应用程序，允许您输入名称/号码，将其添加到列表中，从该列表中删除行，并将列表存储在本地存储中。另一个规则是所有HTML / CSS / Javascript都必须包含在一个文件中（我假设这教会了我将关于将不同部分拆分成多个文件的教训是一个好主意）。

现在我遇到的问题是我可以创建电话簿条目，我已将其作为新行添加到现有表中，但似乎无法将它们放入本地存储中。这是我第一次进入任何类型的存储设备，因此我很挣扎，并且想要了解下一步该去哪里或者我做错了什么。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>Phonebook 1.0</title>

<style>
#welcome {
        background-color: #0000DD;
        border-radius: 5px;
        height: 50px;
}

#welcomeText {
        position: relative;
        left: 10px;
        top: 32%;
        color: white;
        font-family: Georgia, Verdana;
}

.header {
        font-family: Georgia, Verdana;
        font-size: 18px;

}

h1 {
        font-family: Georgia, Verdana;
}

#deleteRow {
        background-color: transparent;
        text-decoration: underline;
        border: none;
        color: blue;
        cursor: pointer;
}



</style>

<script type="text/javascript">

    function contact (name, home, work, cell) {
        this.name = name;
        this.home = home;
        this.work = work;
        this.cell = cell;
    }

    var store = [];
    localStorage["store"] = JSON.stringify(store);

    function addRow() {

        var newContact = new contact(document.getElementById("name").value, document.getElementById("home").value, 
                                 document.getElementById("work").value, document.getElementById("cell").value);

        var table = document.getElementById("input");
        var row = table.insertRow(document.getElementById("input").rows.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);

        cell1.innerHTML = newContact.name;
        cell2.innerHTML = newContact.home;
        cell3.innerHTML = newContact.work;
        cell4.innerHTML = newContact.cell;
        cell5.innerHTML = "<button id='deleteRow'>Delete</button>"

        for (i = 2; i < document.getElementById("input").rows.length; i++) {
            store.push(table[i]);
        };

        console.log(storedData);
        console.log(store);
    }

    var storedData = JSON.parse(localStorage["names"]);



</script>       
</head>

<body>

<h1>Phonebook Beta 1.7</h1>

<div id="welcome">
    <b id="welcomeText">Welcome to my single-page phone book application.</b>
</div>

<table id="input">
    <tr>
        <th class="header"><b>Name</b></th>
        <th class="header"><b>Home</b></th>
        <th class="header"><b>Work</b></th>
        <th class="header"><b>Cell</b></th>
    </tr>
    <tr>
        <td><input id="name" type="text" name="name"></form></td>
        <td><input id="home" type="text" name="home"></form></td>
        <td><input id="work" type="text" name="work"></form></td>
        <td><input id="cell" type="text" name="cell"></form></td>
        <td><button onclick="addRow()">Add</button></td>
    </tr>
</table>

</body>
</html>

Answer 1

将项目添加到本地存储的正确方法是

localStorage.setItem("store",JSON.stringify(store));

http://www.w3schools.com/html/html5_webstorage.asp

设置商店后。目前你正在做 localStorage [“store”] = JSON.stringify（store）;

哪个是a）不正确，b）存储空数组或空数组。

尝试

for (i = 2; i < document.getElementById("input").rows.length; i++) {
        store.push(table[i]);
    };
 localStorage.setItem("store",JSON.stringify(store));

将表本地存储到数组中

1 个答案: