Javascript：如何在 LocalStorage 中存储类的实例？

Question

假设我有一堂课：

Class Comment {

    constructor(user, comment) {

        this.username = document.createElement("span");

        this.comment = document.createElement("p");

        this.body = document.querySelector("body");        

    }

    createComment() {

        this.username.textContent = user;

        this.commet.textContent = comment;

        body.appendChild(this.username);

        body.appendChild(this.comment);

    }

}

每次用户在页面上输入用户名和评论并点击提交按钮时，它都会创建一个新的类实例（新评论！）：

const submitButton = document.querySelector("#submitButton");

submitButton.addEventListener("click", () => {

    let addComment = new Comment(userInput.value, commentInput.value);

}

我想将这些实例中的每一个存储在 localStorage 中（按顺序）：

exisitingComments = []

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

存储分配给实例的变量 (addComment) 会导致方法 createComment 在加载时未定义：

window.onload = function() {

    existingComments = JSON.parse(localStorage.existingComments);

    let i = existingComments.length - 1;

    for (; i >= 0; i--) {

        existingComments[i].createCommet()

    }

}

-> TypeError: existingComments[i].createComment is not a function

我无法存储用户名和评论并创建新的类实例，因为用户名和评论不应该是唯一的，如果用户想删除评论我无法知道它在 localStorage 中的位置（如果让我们说有多个相同的评论）。

起作用的一件事是每次单击提交按钮时，调用一个函数来循环整个评论部分：

const commentSection = document.querySelector("#commentSection").children;

for (x = 0; x < commentSection.length - 1; x++) {

    commentSection[x].setAttribute("id", `comment#{x}`);

}

这些 id 对应于 localStorage 中评论的位置。

任何人都知道可以实现的更好方法吗？提前一百万谢谢！！

Answer 1

这里的核心问题是本地存储仅存储字符串（文档）并且您使用的是 JSON 编码。JSON 不支持类或 DOM 元素。您需要引入某种序列化来表示您的类并稍后对其进行补充。有关 Javascript 序列化的更多指导，请参阅此问题。该问题中没有评论 DOM 问题，但是如果您的反序列化机制创建了Comment类的新实例，它应该具有创建新 DOM 元素的副作用。