Zapisywanie wyboru użytkownika podczas odświeżania strony

Question

Mam obecnie stronę, która wyświetla dane dla różnych zespołów.

Mam niektóre dane, które użytkownik może kliknąć, aby stan "włączony" lub "wyłączony", pokazując inną ikonę dla każdego. Jest to zasadniczo jak lista kontrolna, tylko bez fizycznych pól wyboru.

Chciałbym zapamiętać, które z "pól wyboru" zostało zaznaczone, nawet po tym, jak użytkownik odświeży stronę lub zamknie przeglądarkę i powróci później.

Słyszałem, że localStorage jest dobrym rozwiązaniem, ale nie jestem pewien, jak go użyć w takiej sytuacji jak moja.

Obecnie mam ten kod:

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

To sprawia, że ​​wiersze do reprezentowania zespołu. Wiersze są zachowywane z podświetlaniem kolorów, gdy użytkownik przegląda różne zespoły podczas sesji przeglądarki.

To jest mój 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> 

A niektórzy CSS, aby wyświetlić listę elementów, które są "on" i "off".

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

W jaki sposób strona może zapamiętać podświetlanie kolorów?

Answer 1

Jeśli chcesz użyć local storage, aby stan listy zespołów pozostał w sesjach przeglądarki, musisz zachować logiczną reprezentację stanu i zapisać ją jako ciąg, gdy stan się zmieni.

JSON.stringify pozwala kodować obiekt JavaScript w ciągu JSON. Na przykład, można wywołać funkcję jak poniżej ilekroć zmodyfikować globalny obiekt o nazwie pageState:

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

Aby pobrać stan strony na stronie obciążenia, można zrobić coś takiego:

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

Jeśli pageState nie został zapisany w poprzedniej sesji, zostanie teraz utworzony i zapisany w pamięci lokalnej. W przeciwnym razie sprawdzamy dane pageState dla danych, których możemy użyć do przywrócenia poprzedniego wyglądu wykazów zespołów.

Ten przykładowy kod działa przy założeniu, że obiekt globalny teams zawiera informacje dotyczące stanu strony. Możesz dodać dalsze właściwości do obiektu stanu strony, aby zachować więcej informacji.Na przykład, aby pamiętać, która drużyna jest aktualnie wyświetlany, można zrobić:

pageState.showTeam = teamName; 

Następnie można skonsultować pageState.showTeam kiedy inicjowanie zawartość strony, może tak:

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

zrobiłem stronę, która demonstruje takie podejście. Nie mogę umieścić go w mojej odpowiedzi jako urywek bo localStorage jest piaskownicy, ale można uzyskać dostęp do strony tutaj:

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

mam reorganizacji danych zespołów, aby umożliwić dynamiczne inicjalizacji strony. Teraz każdy obiekt zespołu zawiera tablicę obiektów osób.

Gdy użytkownik kliknie na nazwę członka zespołu, klasa CSS selected przełączany jest na elemencie HTML i odpowiednia osoba obiekt jest aktualizowana poprzez przełączanie jej selected właściwość:

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

Funkcja showTeam sprawdza osoby Właściwość selected podczas budowania reprezentacji HTML i dodaje klasę CSS selected, jeśli jest to odpowiednie. Dzięki temu możliwe jest przywrócenie wyglądu strony z ostatniej sesji.

Answer 2

można ustawić flagę w localStorage dla każdej opcji przy użyciu:

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

i dostęp do niego za pomocą:

flagValue = localStorage.item1

użyć tych wartości podobnie w kodzie, gdy dokument jest Gotowy do ustawienia początkowych wartości pól wyboru odpowiednio