Salvataggio della selezione dell'utente durante l'aggiornamento della pagina

Question

Attualmente ho una pagina che mostra i dati per diversi team.

Ho alcuni dati su cui l'utente può fare clic per renderlo uno stato "on" o "off", mostrando un'icona diversa per ciascuno. È fondamentalmente come una lista di controllo, solo senza le caselle di controllo fisiche.

Vorrei ricordare quale delle "caselle di controllo" è stata spuntata, anche dopo che l'utente ha aggiornato la pagina o chiuso il browser e restituisce in seguito.

Ho sentito dire che localStorage è una buona opzione, ma non sono sicuro di come utilizzarlo in una situazione come la mia.

Attualmente ho questo codice:

team1 = { 
    "information1": { 
     "name": "tom", 
     "age": "34" 
    }, 
    "information2": { 
     "name": "bob", 
     "age": "20" 
    }, 
}; 

team2 = { 
    "information1": { 
     "name": "betsy", 
     "age": "27" 
    }, 
    "information2": { 
     "name": "brian", 
     "age": "10" 
    }, 
}; 

$(document).ready(function() { 

    $("#displayObject1").on("click", function() { 
     switchData(team1); 
    }); 

    $("#displayObject2").on("click", function() { 
     switchData(team2); 
    }); 
    $("#table").on("click", ".on", function() { 
     $(this).removeClass("on"); 
     $(this).addClass("off"); 
    }); 
    $("#table").on("click", ".off", function() { 
     $(this).addClass("on"); 
     $(this).removeClass("off"); 
    }); 
}); 


function switchData(object) { 
    $("#table").contents("div").remove(); 
    if (!('rows' in object)) { 
     var rows = []; 
     Object.keys(object).forEach(function (key) { 
      if (key != 'rows') { 
       rows.push($('<div class="row on">' + object[key].name + '</div>')); 
      } 
     }); 
     object.rows = rows; 
    } 
    object.rows.forEach(function (row) { 
     $('#table').append(row); 
    }); 
} 

Questo rende le righe per rappresentare una squadra. Le righe vengono mantenute con l'evidenziazione del colore quando l'utente guarda i diversi team durante una sessione del browser.

Questo è il mio HTML:

<div id="displayObject1"> 
    <span>Display object 1</span> 
</div> 
<div><hr></div> 
<div id="displayObject2"> 
    <span>Display object 2</span> 
</div> 
<div id="table"> 
</div> 

E alcuni CSS per mostrare quale lista articoli sono "on" e "off".

.on { 
    background-color: green; 
} 
.off { 
    background-color: red; 
} 

Come può la pagina ricordare l'evidenziazione del colore?

Answer 1

Se si desidera utilizzare local storage per mantenere lo stato degli elenchi del team su tutte le sessioni del browser, è necessario mantenere una rappresentazione logica dello stato e salvarlo come stringa ogni volta che lo stato cambia.

JSON.stringify consente di codificare un oggetto JavaScript in una stringa JSON. Ad esempio, è possibile chiamare una funzione come la seguente ogni volta che si modifica un oggetto globale chiamato pageState:

function savePageState() { 
    localStorage.setItem('pageState', JSON.stringify(pageState)); 
} 

Per recuperare lo stato della pagina il caricamento della pagina, si può fare qualcosa di simile:

pageState = JSON.parse(localStorage.getItem('pageState')); 
if (pageState === null) { 
    pageState = { 
    teams: teams 
    }; 
    savePageState(); 
} else { 
    teams = pageState.teams; 
} 

Se pageState non è stato salvato in una sessione precedente, viene ora creato e salvato nella memoria locale. In caso contrario, consultiamo lo pageState per i dati che possiamo utilizzare per ripristinare l'aspetto precedente degli elenchi del team.

Questo esempio di codice funziona presupponendo che l'oggetto globale teams contenga informazioni relative allo stato della pagina. È possibile aggiungere ulteriori proprietà all'oggetto stato pagina per memorizzare ulteriori informazioni.Ad esempio, per ricordare quale squadra attualmente visualizzata, si potrebbe fare:

pageState.showTeam = teamName; 

Quindi è possibile consultare pageState.showTeam quando stai inizializzazione il contenuto della pagina, forse in questo modo:

if (teamName == pageState.showTeam) { 
    showTeam(teamName); 
    $(label).addClass('selected'); 
} 

ho fatto una pagina che dimostra questo approccio. Non posso includerlo nella mia risposta come un frammento perché localStorage è a tenuta stagna, ma è possibile accedere alla pagina qui:

http://michaellaszlo.com/so/click-rows/

ho riorganizzato i dati del team per consentire l'inizializzazione pagina dinamica. Ora ogni oggetto team contiene una serie di oggetti persona.

Quando l'utente fa clic sul nome di un membro del team, la classe CSS selected è attivata l'elemento HTML e l'oggetto persona corrispondente viene aggiornato commutando la sua proprietà selected:

function memberClick() { 
    $(this).toggleClass('selected'); 
    this.person.selected = (this.person.selected ? false : true); 
    savePageState(); 
}; 

La funzione showTeam controlla una persona di selected proprietà durante la creazione della sua rappresentazione HTML e aggiunge la classe CSS selected se appropriato. Questo è ciò che rende possibile ripristinare l'aspetto visivo della pagina dall'ultima sessione.

Answer 2

è possibile impostare un flag in localStorage per ogni opzione utilizzando:

localStorage.setItem('item1',true) //set the value to the checkbox's value

e accedervi utilizzando:

flagValue = localStorage.item1

utilizzare questi valori in modo simile nel codice una volta che il documento è pronto a impostare i valori iniziali delle caselle di controllo di conseguenza