I’ve been building an Electron app to show the locations of Altars of Lilith (Diablo 4) with in-game loctions and the in-game map. The elements are created through JS literal templates taken from JSON.

I would like to allow the user to click a label (I’m using a checkbox that is hidden through CSS with the label allow the click function) to hide the element. I’ve tried everything I can to get localStorage to save this state – But for some reason I’m messing it up somewhere.

I’ve got a dark/light mode in place that also uses the localStorage and it works fine.

This is my first post on SO so I’m not to sure how to go about this. I’ve got the project uploaded to Github if linking the project would be helpful.

Fractured Peaks Altars Template:

function altarsTemplate(altar) {
    return `
            <div class="altar-of-lilith-container" id="${altar.dataID}">

                <form id="altarCheckbox">
                    <div class="checkbox-container">
                        <input type="checkbox" class="altarButtonClass" id="${altar.dataIDChecked}">
                        <label for="${altar.dataIDChecked}" id="${altar.dataIDChecked}" onclick="${altar.onCheckMark};${altar.hideChecked}">${altar.name}</label>
                    </div>
                <form>

                <div id="${altar.name}" class="altarContainer">

                    <div>
                        <div id="altarImages">
                            <div class="altarImage">
                                <img class="smallImg" id="showMapImage" src="${altar.mapImage}" />
                            </div>
                            <div class="altarImage">
                                <img class="smallImg" id="showInGameImage" src="${altar.inGameImage}" />
                            </div>
                        </div>
                    </div>
                    <table class="table-container">
                        <tbody>
                            <tr>
                                <td>Number</td>
                                <td>Region</td>
                                <td>Sub-Region</td>
                                <td>Area</td>
                                <td>Reward</td>
                            </tr>
                            <tr>
                                <td>${altar.number}</td>
                                <td>${altar.region}</td>
                                <td>${altar.subregion}</td>
                                <td>${altar.area}</td>
                                <td>${altar.reward}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            `;
}

document.getElementById("fracturedPeaksLilithAltars").innerHTML = `${altarData.map(altarsTemplate).join('')}`;

First entry of JSON data (Just moved all Fractured Peaks data into 1 JS file to make it easier – Since there is going to be about 300 or so objects to these arrays.

const altarData = [
    {
        "number": "01",
        "name": "Desolate Highlands Altar of Lilith #1",
        "region": "Fractured Peaks",
        "subregion": "Desolate Highlands",
        "area": "Eastern Pass",
        "mapImage": "./img/altar-of-lilith/fractured-peaks/map/01-map.webp",
        "inGameImage": "./img/altar-of-lilith/fractured-peaks/in_game/01-in_game.webp",
        "reward": "+2 Dexterity",
        "dataID": "fractPeaksAltar01",
        "dataIDChecked": "fractPeaksAltar01_checked",
        "onCheckMark": "document.getElementById('fractPeaksAltar01').classList.toggle('hide')",
    }
];

I’ve tried:

electron-store,
electron-settings,
variants of “localStorage.setItem(‘checkbox’, checked);”

I’ve used tutorials and examples from both SO and things like: