Memorizzazione temi per le diverse pagine del sito

M

Membro cancellato 49667

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

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

Utente Attivo
22 Feb 2014
591
25
28
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ì:
JavaScript:
localStorage.setItem('tema', 1);
Avrai quindi un valore 1 associato alla chiave tema. Per cui quando la ri chiami così:
JavaScript:
alert( localStorage.getItem('test') ); // 1
riceverai 1

Quindi banalmente potresti fare una cosa del genere..
JavaScript:
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');
  }
 
  • Like
Reactions: enzo_88
Discussioni simili
Autore Titolo Forum Risposte Data
P [PHP] checkbox e sua memorizzazione nel db PHP 31
P doppio problema nella memorizzazione dati PHP 11
P problema memorizzazione dati o immagine PHP 18
P leggere dvd e memorizzazione dei dati letti PHP 1
K consiglio su supporto di memorizzazione MySQL 6
A problema estrazione singolo valore e memorizzazione in variabile PHP 1
A Facebook login - memorizzazione su mysql Sviluppo app per Android 1
Alessandro Le Mura [risolto] PHP problema memorizzazione array PHP 4
R ordinamento immagini con drag and drop e memorizzazione db PHP 1
R checkbox e memorizzazione dati PHP 1
W Memorizzazione post utenti in database PHP 6
A [PHP] Creare memorizzazione indirizzi ip PHP 2
zighy memorizzazione degli elementi PHP 22
F Memorizzazione degli Acquisti fatti sul SitoWeb da parte di diversi utenti Database 1
M Array. Stampa e memorizzazione in database PHP 2
M form per login con memorizzazione id utente da database PHP 5
S Procedura memorizzazione Javascript 0
M temi premium Shopify da 180$ l'uno a prezzi bassissimi Altri Annunci 0
B Vendo Temi per Wordpress e template html5 Altri Annunci 0
giuseppe_123 [WordPress] problema installazione temi, plugin e caricamento immagini WordPress 5
Sbemmer33 VENDO TEMI E PLUGIN WORDPRESS SCONTATI AL 90% Altri Annunci 0
readme [WordPress] Cerco temi, plugin o codice per la mia idea WordPress 2
B [scambio] link o guest blog, temi: capelli, bellezza, tatuaggi, salute, medicina. Offerte e Richieste di scambio links 0
Max 1 Realizzo template (temi) per WordPress, Blogger, Joomla, Drupal e DotNetNuke Altri Annunci 1
G [Vendo] Diversi Blog piu' temi Compravendita siti e domini 1
alankanz Utilizzo dei temi PHP 2
F temi wordpress WordPress 4
W Dove trovare temi per Drupal 7 gratuiti ed affidabili? CMS (Content Management System) 1
D Temi personalizzabili per siti di chat HTML e CSS 0
T [Vendo] Servizio di pubblicazione Article marketing su PR-3 vari temi! Offerte e Richieste di scambio links 0
B [Offro] [RETRIBUITO] Cercasi articolisti per vari temi (bellezza, moda, sport) Offerte e Richieste di Lavoro e/o Collaborazione 0
Web Designer Download Utility, Temi, Tools per Magento Magento 0
Web Designer Lista Temi per MyBB in continuo aggiornamento CMS (Content Management System) 4
F Come creare temi per concrete5 CMS (Content Management System) 2
A [VENDO] Fan page temi vari Annunci servizi di Social Media Marketing 0
G Blog Temi Vista Presenta il tuo Sito 1
G Temi per Wordpress WordPress 0
T FantasyTeam, registrati e scarica giochi e temi per cellulare, giochi pc e film Presenta il tuo Sito 3
M Mytom.it: Temi, sfondi e altro... Presenta il tuo Sito 11
alex84freeangel Temi Con Phpnuke 7.0.1 PHP 0
N Scambio Link a Tema, su vari temi :P Presenta il tuo Sito 1
X-Zeus Temi per PHPNuke PHP 1
T if sempre vero per una classe PHP 3
V Quanti GB per una telecamera con sim card? IP Cam e Videosorveglianza 0
felino Lubuntu 18.04 Requisiti per applicazione console .net core 7.0 Linux e Software 0
M pulsante per aprire una maschera che contiene controllo schede MS Access 0
E Aiuto per query PHP 8
E Il punto di riferimento italiano per Trailers cavalli Discussioni Varie 0
F CERCO Servizi SEO di Qualità per Agenzie di Servizi SEO e Posizionamento 3
D Miglior modo per estrarre le occorrenze di un elemento in un set di più file xml e quindi scrivere il risultato in una tabella Excel o magari in JSON XML 0

Discussioni simili