javascript - 保存到 localStorage 时保留实例类型

Question

我很难弄清楚我应该如何将我的类(class)保存到 localStorage 比如当我取回它时，我仍然可以调用我定义的实例方法。

这是一个引发错误的示例:

class Employee {
    constructor(name, gender, department, yy, email) {
        this.name = name;
        this.gender = gender;
        this.department = department;
        this.email = email;
        this.skills = [];
    }

    addNewSkill(skill){
        this.skills.push(skill);
    }
}

const employee = new Employee({
    name: "John Doe", 
    gender: "male", 
    department: "CS", 
    email: "john@doe.com"
});

employee.addNewSkill("coding");

localStorage.setItem("employees", employee);

const retrievedEmployee = JSON.parse(localStorage.getItem("employee"));

// Throws Uncaught TypeError: retrievedEmployees[0].addNewSkill is not a 
// function.
retrievedEmployee.addNewSkill("reading");

Answer 1

对象 失去他们的类型当您使用 JSON.stringify 将它们转换为字符串时.虽然它们的属性和值被保留，但任何关于它是 Employee 的信息实例丢失。

从 window.localStorage 检索后, 当你 JSON.parse保存的字符串，您正在创建普通对象而不是实际的 Employee对象因此检索到的对象缺少 employee.addNewSkill()方法。

您应该确保您的 Employee类允许使用 Employee 轻松实例化-like 对象，然后每次从 LocalStorage 检索保存的 Employee 时，都会实例化一个新的 Employee从该对象中取出实例，如下所示:

这是一个例子:

// The Employee now takes an Employee or Employee-like object 
// instead of separate arguments.
class Employee {
    constructor({ name, gender, department, yy, email, skills }) {
        this.name = name;
        this.gender = gender;
        this.department = department;
        this.email = email;
        this.skills = skills || [];
    }

    addNewSkill(skill){
        this.skills.push(skill);
    }
}

// Create an Employee.
const employee = new Employee({
    name: "John Doe", 
    gender: "male", 
    department: "CS", 
    email: "john@doe.com"
});

// Add a skill.
employee.addNewSkill("coding");

// Turn employee to string and save to localStorage.
localStorage.setItem("employee", JSON.stringify(employee));

// Parse the string back into an Employee-like object and 
// use that object to construct a new Employee.
const retrievedEmployee = new Employee(JSON.parse(localStorage.getItem("employee")))

// Add another skill, using the Employee instance method.
retrievedEmployee.addNewSkill("reading");

// Logs Employee having 2 skills, one added *before* we saved to localStorage 
// and another skill we added *after* we retrieved him from localStorage.
console.log(retrievedEmployee);

作为记录，我之前在一个大型项目中遇到过这个问题，并使用了一个名为 typeson 的 npm 模块。允许序列化和反序列化自定义类型。