Speichern der Benutzerauswahl beim Aktualisieren der Seite

Question

Ich habe derzeit eine Seite, die Daten für verschiedene Teams anzeigt.

Ich habe einige Daten, auf die der Benutzer klicken kann, um es in einen "An" - oder "Aus" -Zustand zu versetzen, wobei für jedes ein anderes Symbol angezeigt wird. Es ist im Grunde wie eine Checkliste, nur ohne die physischen Kontrollkästchen.

Ich möchte mich erinnern, welche der "Checkboxen" angekreuzt wurden, auch nachdem der Benutzer die Seite aktualisiert oder den Browser schließt und später wiederkehrt.

Ich habe gehört, dass localStorage ist eine gute Option, aber ich bin mir nicht sicher, wie man es in einer Situation wie meins verwendet.

Zur Zeit habe ich diesen Code:

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); 
    }); 
} 

Dies macht Reihen ein Team zu vertreten. Die Zeilen werden mit ihrer farblichen Hervorhebung beibehalten, wenn der Benutzer während einer Browsersitzung verschiedene Teams betrachtet.

Das ist mein 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> 

Und einige CSS zu zeigen, welche Listenelemente sind "on" und "off".

Wie kann die Seite an die Farbhervorhebung erinnern?

Answer 1

Wenn Sie Wenn Sie möchten, dass der Status der Teamauflistungen in den Browsersitzungen beibehalten wird, müssen Sie eine logische Darstellung des Status beibehalten und diese als Zeichenfolge speichern, wenn sich der Status ändert.

JSON.stringify können Sie ein JavaScript-Objekt in einer JSON-Zeichenfolge codieren. Zum Beispiel können Sie eine Funktion wie die folgenden nennen, wenn Sie ein globales Objekt pageState Namen ändern:

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

Um den Seitenzustand beim Laden der Seite abzurufen, können Sie etwas tun:

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

Wenn pageState in einer vorherigen Sitzung nicht gespeichert wurde, wird es jetzt erstellt und im lokalen Speicher gespeichert. Andernfalls konsultieren wir pageState für Daten, die wir verwenden können, um das vorherige Erscheinungsbild der Teamauflistungen wiederherzustellen.

Dieses Codebeispiel basiert auf der Annahme, dass das globale Objekt teams Informationen enthält, die für den Seitenstatus relevant sind. Sie können dem Seitenstatusobjekt weitere Eigenschaften hinzufügen, um weitere Informationen zu speichern.Zum Beispiel, sich daran zu erinnern, welches Team gerade angezeigt wird, können Sie tun:

pageState.showTeam = teamName; 

Dann können Sie pageState.showTeam konsultieren, wenn Sie die Seiteninhalte sind initialisiert, vielleicht so:

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

Ich habe gemacht Eine Seite, die diesen Ansatz demonstriert. Ich kann es nicht in meiner Antwort als Schnipsel enthalten, weil localStorage Sandbox ist, aber Sie hier die Seite zugreifen können:

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

ich Ihr Team Daten neu organisiert haben dynamische Seite Initialisierung zu ermöglichen. Jetzt enthält jedes Teamobjekt ein Array von Personenobjekten.

Wenn der Benutzer klickt auf den Namen des Teammitglieds, die CSS-Klasse selected auf dem HTML-Element umgeschaltet wird und die entsprechende Person Objekt aktualisiert wird durch seine selected Eigenschaft Makeln:

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

Die showTeam Funktion einer Person überprüft selected Eigenschaft, wenn es seine HTML-Darstellung erstellt, und fügt die CSS-Klasse selected, falls zutreffend. Dies ermöglicht es, das visuelle Erscheinungsbild der Seite von der letzten Sitzung wiederherzustellen.

Answer 2

Sie eine Flagge in localstorage für jede Option kann mit:

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

und greifen Sie mit:

flagValue = localStorage.item1

diese Werte verwenden, ähnlich in Ihrem Code, wenn das Dokument bereit, die Anfangswerte der Kontrollkästchen entsprechend