Memorizzazione temi per le diverse pagine del sito

[Membro cancellato 49667]

Buon pomeriggio a voi community,

sono ancora nuovo in questo forum, e non vedo l'ora che voi soddisfiate le mie domande e io ricambiando
Vorrei inoltre dirvi che sono ancora uno nuovo in JavaScript, vedrò strada facendo di migliorare le mie conoscenze a riguardo.
Ad ogni modo, vorrei sapere come posso fare in modo che il mio sito web possa memorizzare un tema specifico selezionato dall'utente navigando sempre con lo stesso tema, poiché attualmente appena clicchi un tema e poi cambiando pagina si ripristina quella di default. Avevo letto un qualcosa sulla localStorage, come posso dunque applicare questa funzionalità? Qui sotto vi metto il codice della situazione attuale:

<footer class="center color-windows padding-16">
        <p class="bold">NewTechSlyDev_</p>
        <div class="mini-grid-container" id="myThemes">
            <div class="default-theme mini-polaroid badge little-resize pointer" data-tema="" title="Default"></div>
            <div class="pacific-theme mini-polaroid badge little-resize pointer" data-tema="pacific" title="Pacific">
            </div>
            <div class="blank-theme mini-polaroid badge little-resize pointer" data-tema="blank" title="Blank"></div>
            <div class="transparent-theme mini-polaroid badge little-resize pointer" data-tema="transparent"
                title="Transparent"></div>
            <div class="dark-theme mini-polaroid badge little-resize pointer" data-tema="dark" title="Dark"></div>
            <div class="apricot-theme mini-polaroid badge little-resize pointer" data-tema="apricot" title="Apricot">
            </div>
            <div class="past-theme mini-polaroid badge little-resize pointer" data-tema="past" title="Past"></div>
            <div class="panorama-theme mini-polaroid badge little-resize pointer" data-tema="panorama" title="Panorama">
            </div>
            <div class="moving-theme mini-polaroid badge little-resize pointer" data-tema="moving"
                title="Moving Gradient"></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>

Grazie in anticipo e di cuore della risposta
NewTechSlyDev_

 

[otto9due]

Buongionro, si con le local storage dovresti risolvere. Ti spiego come funzionano. Il principio è molto semplice hai a disposizione due tipi di storage: localStorage e sessionStorage, entrambi permettono di salvare coppie chiave/valore nel browser. Ciò che è interessante è che i dati rimangono memorizzati anche in seguito al ricaricamento della pagina (per sessionStorage) e anche in seguito a un riavvio del browser (per localStorage).

Quindi se vuoi usare un dato memorizzato per la sola sessione esempio banale un prodotto in un carrello che vuoi tenere fino al checkout, puoi dalvarlo li, se invece come serve a te vuoi tenere la configuraione scelta dal cliente per un tema conviene usare le localStorage perchè appunto saranno memorizzate nel browser a tempo illimitato.

Sperando di essere stato chiaro passiamo alla pratica:

Entrambi i sitemi hanno gli stessi metodi e proprietà:

• setItem(key, value): memorizza la coppia chiave/valore.
• getItem(key): lettura del valore relativo alla chiave richiesta.
• removeItem(key): rimuove la chiave, ed il relativo valore.
• clear(): rimuove tutti gli elementi.
• key(index): lettura della chiave all’indice index indicato.
• length: il numero di oggetti archiviati.

Esempio specifico potrebbe essere quello di verificare al caricamento pagina se vi è una localStorage settata, se c'è imposti il tema, altrimenti quando l'utente ne sceglie uno imposti la local storage che troverai quando l'utente ritorna sul sito.

Per settare la local storage basta semplicemente fare così:

localStorage.setItem('tema', 1);

Avrai quindi un valore 1 associato alla chiave tema. Per cui quando la ri chiami così:

alert( localStorage.getItem('test') ); // 1

riceverai 1

Quindi banalmente potresti fare una cosa del genere..

if(typeof Storage !== "undefined") { // verifico che il browser sia compatibile (lo sono tutti ormai ma, meglio prevenire..)
    if (localStorage.getItem("tema") !== null) { // se in passato è stato già salvato il tema..
      alert('il tema salvato è ' + localStorage.getItem("tema")); // ci fai quello che vuoi..
    } else {
      localStorage.setItem('tema', 1); // altrimenti lo setto così da ritrovarlo la prossia volta..
    }
    
  } else {
   alert('se vuoi comunichi che il browser non supporta lo storage altrimenti elimini else');
  }