Can you use localStorage to store what a user puts in a div contenteditable and a set color?

Question

I made a fairly basic "biomaker" website where the user can edit the card through several <div contenteditable="true">s, and it also uses a simple javascript to allow the user to cycle through several preset colors.

After receiving feedback from several users it seems that it would be better if the page could save the user's previous information upon closing/refreshing the tab.

I did a little research and I came upon the localStorage function but I'm not sure if it can be applied to the color changer and more importantly, the <div contenteditable="true". I'm wondering if 1) it's possible and 2) if so, how I can make it save the content, since what the user puts in the div doesn't affect the backend.

Thanks in advance for any help.

Disclaimer: I've seen a lot of people bashing others because they're asking for "free code". I'm not asking for that here, I'm just hoping people can 1) tell me if it's possible and 2) can point me in the right direction.

EDIT: Thanks for the help! I was able to find a solution.

Answer 1

1. Yes it is posssible.
2. You first should check whether localStorage is available in the user's browser, for what you can use this function that works in all browsers (i use it too on my website):

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = "__storage_test__";
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch (e) {
        return e instanceof DOMException && (e.code === 22 || e.code === 1014 || e.name === "QuotaExceededError" || e.name === "NS_ERROR_DOM_QUOTA_REACHED") && (storage && storage.length !== 0);
    }
}

Use it like this:

editableDiv = dopcument.getElementById("print"); // get the editable div

editableDiv.addEventListener("input", function() { // this function will be executed whenever the content of the editableDiv changes
    if (storageAvailable("localStorage")) { // check for storage availability
        divcontent = editableDiv.innerHTML; // get contents of the editableDiv
        window.localStorage.setItem("divcontent", divcontent); // add them to the localStorage
    } else { // if localStorage is not supported, notify the user about it
        alert("Your browser does not support localStorage or you disabled it, the things you entered could not be saved !");
    }
});

and when the user comes back, you can restore the contents:

editableDiv = document.getElementById("print"); // get the editable div


window.addEventListener("load", function() { // this function is executed whenever the page is loaded
    if (storageAvailable("localStorage")) { // check for storage availability
        divcontent = window.localStorage.getItem("divcontent"); // get the saved divcontent
        if (divcontent === null) { // if the user never modified the divcontent before (or cleaned his localStorage), do nothing
        } else {
            editableDiv.innerHTML = divcontent; // write it into the editableDiv
        }
    } else { // if strorage not available, notify the user
        alert("Your browser does not support localStorage or you disabled it, your previous work could not be restored !");
    }
});

Feel free to modify this code to your needs, and notify me about any problems you have with it ! (couldn't test it, am busy right now)