Javascript: Как я могу хранить экземпляры класса в LocalStorage? - PullRequest
Новая
       5

Javascript: Как я могу хранить экземпляры класса в LocalStorage?

0 голосов
/ 01 апреля 2020

Допустим, у меня есть класс: 

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 (если, скажем, было несколько идентичных комментариев).

Единственное, что работает, это каждый раз, когда нажимается кнопка отправки, вызывая функцию для l oop по всему разделу комментариев: 

const commentSection = document.querySelector("#commentSection").children;
for (x = 0; x < commentSection.length - 1; x++) {
    commentSection[x].setAttribute("id", `comment#{x}`);
}

и эти идентификаторы соответствуют позиции комментария в localStorage.

Кто-нибудь знает лучший способ это можно сделать? Спасибо за миллион заранее !!

1 Ответ

0 голосов
/ 01 апреля 2020

Основная проблема заключается в том, что в локальном хранилище хранятся только строки ( документация ), а вы используете кодировку JSON. JSON не поддерживает классы или элемент DOM. Вам нужно будет ввести какую-то сериализацию для представления вашего класса и повторить ее позже.

См. этот вопрос для получения дополнительных указаний по сериализации в Javascript.

Проблема DOM не комментируется в этом вопросе, но если ваш механизм десериализации создает новые экземпляры вашего Comment класса, это должно иметь побочный эффект от создания новых элементов DOM.

...