OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Using localStorage to save the visibility state of an element in an Electron app using JSON and JS Literal Templates

  • Thread starter Thread starter David Dean
  • Start date Start date
D

David Dean

Guest
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:

Code:
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:

Code:
Note: 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.

Code:
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:

https://codepen.io/kylastoneberg/pen/qweppq

<p>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.</p>
<p>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.</p>
<p>I've got a dark/light mode in place that also uses the localStorage and it works fine.</p>
<p>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.</p>
<p>Fractured Peaks Altars Template:</p>
<pre><code>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('')}`;
</code></pre>
<p>First entry of JSON data:</p>
<pre><code>Note: 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.
</code></pre>
<pre><code>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')",
}
];
</code></pre>
<p>I've tried:</p>
<p>electron-store,
electron-settings,
variants of "localStorage.setItem('checkbox', checked);"</p>
<p>I've used tutorials and examples from both SO and things like:</p>
<p><a href="https://codepen.io/kylastoneberg/pen/qweppq" rel="nofollow noreferrer">https://codepen.io/kylastoneberg/pen/qweppq</a></p>
 
Top