Let's say I have a class:

Class Comment {
    constructor(user, ment) {
        this.username = document.createElement("span");
        thisment = document.createElement("p");
        this.body = document.querySelector("body");        
    }
    createComment() {
        this.username.textContent = user;
        thismet.textContent = ment;

        body.appendChild(this.username);
        body.appendChild(thisment);
    }
}

Each time a user inputs a username and ment on the page and hits a submit button it creates a new instance of the class (a new ment!):

const submitButton = document.querySelector("#submitButton");
submitButton.addEventListener("click", () => {
    let addComment = new Comment(userInput.value, mentInput.value);
}

I want to store each of these instances in localStorage (in order):

exisitingComments = []
localStorage.setItem("existingComments", JSON.stringify(existingComments));

Storing the variable the instance is assigned to (addComment) results in the method createComment being undefined on load:

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

I can't store the username and ment and create new class instances because the username and ment shouldn't have to be unique and if the user wanted to delete a ment I have no way of knowing where it is in localStorage (if lets say there were multiple identical ments).

The one thing that does work is each time the submit button is clicked, calling a function to loop over the whole ment section:

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

and these id's correspond to the position of the ment in localStorage.

Anyone know of a better way this can be acplished? Thanks a million in advance!!

Let's say I have a class:

Class Comment {
    constructor(user, ment) {
        this.username = document.createElement("span");
        this.ment = document.createElement("p");
        this.body = document.querySelector("body");        
    }
    createComment() {
        this.username.textContent = user;
        this.met.textContent = ment;

        body.appendChild(this.username);
        body.appendChild(this.ment);
    }
}

Each time a user inputs a username and ment on the page and hits a submit button it creates a new instance of the class (a new ment!):

const submitButton = document.querySelector("#submitButton");
submitButton.addEventListener("click", () => {
    let addComment = new Comment(userInput.value, mentInput.value);
}

I want to store each of these instances in localStorage (in order):

exisitingComments = []
localStorage.setItem("existingComments", JSON.stringify(existingComments));

Storing the variable the instance is assigned to (addComment) results in the method createComment being undefined on load:

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

I can't store the username and ment and create new class instances because the username and ment shouldn't have to be unique and if the user wanted to delete a ment I have no way of knowing where it is in localStorage (if lets say there were multiple identical ments).

The one thing that does work is each time the submit button is clicked, calling a function to loop over the whole ment section:

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

and these id's correspond to the position of the ment in localStorage.

Anyone know of a better way this can be acplished? Thanks a million in advance!!

• javascript
• class
• local-storage
• instance
• instance-variables

1 Answer 1

The core issue here is that local storage only stores strings (documentation) and you're using JSON encoding. JSON doesn't support classes or DOM element. You'll need to introduce some sort of serialization to represent your class and rehydrate it later.

See this question for more guidance on serialization in Javascript.

The DOM issue is not mented in that question, but if your deserialization mechanism creates new instances of your Comment class, it should have the side effect of creating new DOM elements.