Question

我已经建立了一个动态HTML表，该表从Localstorage获取数据。我的问题是，当我更新班级时，该表未更新（我得到了旧表，并在employeelist电子邮件中进行了更改，它将不会在新表中更新）我没有收到任何错误。但是，当我在控制台中检查我的Localstorage时，它显示了旧的。...

    constructor(name, gender, department, yy, email, skills) {
        this.name = name;
        this.gender = gender;
        this.department = department;
        this.yy = yy;
        this.email = email;
        this.skills = skills

    }

}
//Employee Database "Localstorage"
if(localStorage.getItem("Employee") == null) {
    var employeeList = [];
    employeeList.push (new Employee("Simon", "Male", "HR", 1999, "SM@cbs.dk", "IT"));
    employeeList.push (new Employee("Mads", "Male","IT", 1999,  "MS@cbs.dk", "Finance"));
    employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "JT@cbs.dk", "HR"));
    employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "BN@cbs.dk", "Sales"));

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector('#employees').appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}
//Function creates table for employeeList
function buildTable(data) {
    let table = document.createElement("table");

        // Create table head and body
        table.appendChild(document.createElement("thead"));
        table.appendChild(document.createElement("tbody"));

        let fields = Object.keys(data[0]);
        let headRow = document.createElement("tr");
        fields.forEach(function (field) {
            let headCell = document.createElement("th");
            headCell.textContent = field;
            headRow.appendChild(headCell);
        });
        table.querySelector("thead").appendChild(headRow);
        data.forEach(function (object) {
            let row = document.createElement("tr");
            fields.forEach(function (field) {
                let cell = document.createElement("td");
                cell.textContent = object[field];
                if (typeof object[field] == "number") {
                    cell.style.textAlign = "right";
                }
                row.appendChild(cell);
            });
            table.querySelector("tbody").appendChild(row);
        });
        return table;

    }
document.querySelector("#employees").appendChild(buildTable(employeeList));

Answer 1

您的代码中只有一个setItem()调用，当存储为空时执行一次：

if(localStorage.getItem("Employee") == null) {
    [...]
    localStorage.setItem("Employee", employeeListString);

自从第一次尝试代码以来，您从未存储过任何新版本的数据。

从LocalStorage建立的表格未更新

1 个答案: