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 元素的副作用。