Good afternoon to you in the community, I'm here to know how to use the code in the context of localStorage. I would like to store with the same one of the different themes chosen by the user that then allows them to be applied in the different pages that the user will visit. How can I do this?
Attached the HTML code and scripts:
<footer class="center blur padding-16">
<p class="bold">NewTechSlyDev_</p>
<div class="mini-grid-container" id="myThemes">
<div class="default-theme mini-polaroid circle little-resize pointer" data-tema="" title="Default"></div>
<div class="dark-theme mini-polaroid circle little-resize pointer" data-tema="dark" title="Dark"></div>
<div class="transparent-theme mini-polaroid circle little-resize pointer" data-tema="transparent" title="Transparent"></div>
<div class="apricot-theme mini-polaroid circle little-resize pointer" data-tema="apricot" title="Apricot"></div>
<div class="past-theme mini-polaroid circle little-resize pointer" data-tema="past" title="Past"></div>
<div class="panorama-theme mini-polaroid circle little-resize pointer" data-tema="panorama" title="Panorama"></div>
<div class="blank-theme mini-polaroid circle little-resize pointer" data-tema="blank" title="Blank"></div>
<div class="slimanoworld-theme mini-polaroid circle little-resize pointer" data-tema="slimanoworld" title="SlimanoWorld"></div>
</div>
<script>
function scegliTema(tema) {
const body = document.body;
if (body.dataset.tema) body.classList.remove(body.dataset.tema);
body.dataset.tema = tema;
if (tema) body.classList.add(tema);
}
(() => {
const elementi = document.querySelectorAll('#myThemes > div');
for (let i = 0; i < elementi.length; ++i) {
const el = elementi[i];
const nomeTema = el.dataset.tema ? el.dataset.tema + '-theme' : '';
elementi[i].addEventListener('click', function() {
scegliTema(nomeTema)
});
}
})();
</script>
</footer>