Question

我正在创建一个联系人列表，我将在其中保存联系人，但是当我保存一个或多个联系人并刷新页面时，它不会保存。我试图将它放在本地存储中，但它不起作用。任何人都可以帮我这个吗？

HTML：

    <br><br>
    Name: <input id = "name" name = "name" type = "text">
    <br><br>
    Gender: <input name = "gender" type = "radio" value = "Male"> Male
    <input name = "gender" type = "radio" value = "Female"> Female
    <br><br>
    Age: &nbsp;&nbsp;&nbsp; <input id = "age" name = "age" type = "text">
    <br><br>
    Number:&nbsp;&nbsp;&nbsp; <input id = "number" name = "number" type = "text">
    <br><br>
    Contact Type: &nbsp;&nbsp;&nbsp;<select id = "Contact_Type" name = "Contact_Type">
    <option>none</option>
    <option>Friend</option>
    <option>Business</option>
    <option>Educational</option>
</select>
    <br><br>
    Address:&nbsp;&nbsp;&nbsp; <input id = "Address" name = "Address" type = "text">
    <br><br>
    Post Code:&nbsp;&nbsp;&nbsp; <input id = "Post_Code" name = "Post_Code" type = "text">
    <br><br>
    Marital Status: &nbsp;&nbsp;&nbsp;<select id = "Marital_Status" name = "Marital_Status">
    <option>none</option>
    <option>Single</option>
    <option>in relationship</option>
    <option>Engaged</option>
    <option>Married</option>
</select>
    <br><br>
    <input  type = "button" value = " Reset " onclick = "ResetForm()">&nbsp;&nbsp;&nbsp;
    <input  type = "button" value = " Add " onclick = "AddData(), saveList()">
    <input type = "button" value = "Remove contact" onclick = "Remove()">&nbsp;&nbsp;&nbsp;
</form>

JS：

function AddData() {
 var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if ((parseInt(x) != (x)) && (y == parseInt(y))) {
    alert("Wrong Value Entered");
} else {
    var rows = "";
    var name = document.getElementById("name").value;
    var gender = document.querySelector('input[name="gender"]:checked');
    gender = gender ? gender.value : '';
    var age = document.getElementById("age").value;
    var number = document.getElementById("number").value;
    var Contact_Type = document.getElementById("Contact_Type").value;
    var Address = document.getElementById("Address").value;
    var Post_Code = document.getElementById("Post_Code").value;
    var Marital_Status = document.getElementById("Marital_Status").value;

    rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + number +"</td><td>" + Contact_Type + "</td><td>"+ Address + "</td><td>" + Post_Code+ "</td><td>" +   Marital_Status +" </td>";
    var tbody = document.querySelector("#list tbody");
    var tr = document.createElement("tr");
    tr.innerHTML = rows;
    tbody.appendChild(tr)
    saveList();
}
}
var saveList = function () {
"use strict";
var appts = JSON.stringify(contact);
if (appts !== "") {
    localStorage.contact = appts;
} else {
    window.alert("Could not save appointments at this time");
}
};
function ResetForm() {
document.getElementById("contact").reset();
}

Answer 1

您的代码有几处错误。

找不到HTML表格。
您已经两次调用saveList函数（在按钮事件和AddData函数结束时）。
您没有将contact参数传递给saveList函数。
您应阅读清洁代码簿以改善编码=）。

代码应该是下一个（您可以检查密钥＆＃34;联系＆＃34;在浏览器中）。

HTML：

  <br>
    <br> Name:
    <input id="name" name="name" type="text">
    <br>
    <br> Gender:
    <input name="gender" type="radio" value="Male"> Male
    <input name="gender" type="radio" value="Female"> Female
    <br>
    <br> Age: &nbsp;&nbsp;&nbsp;
    <input id="age" name="age" type="text">
    <br>
    <br> Number:&nbsp;&nbsp;&nbsp;
    <input id="number" name="number" type="text">
    <br>
    <br> Contact Type: &nbsp;&nbsp;&nbsp;
    <select id="Contact_Type" name="Contact_Type">
        <option>none</option>
        <option>Friend</option>
        <option>Business</option>
        <option>Educational</option>
    </select>
    <br>
    <br> Address:&nbsp;&nbsp;&nbsp;
    <input id="Address" name="Address" type="text">
    <br>
    <br> Post Code:&nbsp;&nbsp;&nbsp;
    <input id="Post_Code" name="Post_Code" type="text">
    <br>
    <br> Marital Status: &nbsp;&nbsp;&nbsp;
    <select id="Marital_Status" name="Marital_Status">
        <option>none</option>
        <option>Single</option>
        <option>in relationship</option>
        <option>Engaged</option>
        <option>Married</option>
    </select>
    <br>
    <br>

    <table id="list">
      <tbody>

      </tbody>
    </table>
    <input type="button" value=" Reset " onclick="ResetForm()">&nbsp;&nbsp;&nbsp;
    <input type="button" value=" Add " onclick="AddData()">
    <input type="button" value="Remove contact" onclick="Remove()">&nbsp;&nbsp;&nbsp;

JS：

<script>
    function AddData() {
        var x = document.getElementById("age").value;
        var y = document.getElementById("name").value;
        var letters = '/^[a-zA-Z]+$/';
        if ((parseInt(x) != (x)) && (y == parseInt(y))) {
            alert("Wrong Value Entered");
        } else {
            var rows = "";
            var name = document.getElementById("name").value;
            var gender = document.querySelector('input[name="gender"]:checked');
            gender = gender ? gender.value : '';
            var age = document.getElementById("age").value;
            var number = document.getElementById("number").value;
            var Contact_Type = document.getElementById("Contact_Type").value;
            var Address = document.getElementById("Address").value;
            var Post_Code = document.getElementById("Post_Code").value;
            var Marital_Status = document.getElementById("Marital_Status").value;

            rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + number + "</td><td>" + Contact_Type + "</td><td>" + Address + "</td><td>" + Post_Code + "</td><td>" + Marital_Status + " </td>";
            var tbody = document.querySelector("#list tbody");
            var tr = document.createElement("tr");
            tr.innerHTML = rows;
            tbody.appendChild(tr)
            contact = {name:name, gender:gender, age:age, number:number, type:Contact_Type, address: Address, zip: Post_Code, marital: Marital_Status};
            saveList(contact);
        }
    }
    var saveList = function(contact) {
        "use strict";
        var appts = JSON.stringify(contact);
        if (appts !== "") {
            localStorage.contact = appts;
        } else {
            window.alert("Could not save appointments at this time");
        }
    };

    function ResetForm() {
        document.getElementById("contact").reset();
    }
</script>

现在你应该编写函数来读取localStorage。

BookAddress使用localStorage（添加用户）

1 个答案: