Question

我正在尝试弄清楚这段代码。我使用localStorage输出动态表的代码

我所了解的。 1.如果条件为localstorage为空的语句，则将数组推入localstorage 2.字符串化EmployeeList 3.使用键，值对设置localStorage 4.将ID标签附加到HTML页面

我不明白的是 1.为什么不使用localStorage.setitem并先设置localStorage，然后再使用get方法 2.为什么要解析代码？

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

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector("#employees").appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}

Answer 1

1）该代码在尝试添加localStorage项之前先检查其是否存在，以免不必要的stringify和对象的存储。

2） employeeList设置为JSON.parse，因为它以字符串形式存储在localStorage中。因此，从localStorage读取它时，该JSON字符串将解析为实际的JSON对象。

Answer 2

为什么不使用localStorage.setitem并先设置localStorage，然后再使用get方法

因为它每次都会用默认数据覆盖本地存储

为什么要解析代码？

localStorage只能存储字符串。

复杂的数据结构（如数组）必须先序列化为字符串，然后才能存储。

由于它们已序列化，因此当您将它们从localStorage中拉出时，需要对它们进行反序列化。

Answer 3

从上到下：

检查本地存储中是否包含键“ Employee”

如果否：

创建一组员工
将此数组转换为字符串（JSON.stringify）
将包含所有员工的字符串存储到本地存储中
通过buildTable(employeeList)方法在DOM中显示员工列表

如果是：

从本地存储（JSON.parse）重新创建一组员工

试图弄清楚JavaScript代码的含义

3 个答案: