framework7 - Wie kann ich beim erneuten Laden der Seite die Optionsschaltfläche beibehalten?

Question

ich ein Thema Wechsler in meinem framework7 App mache, hier der Code des Farbwechslers ist Radio-Taste

<ul id="bluegr"> 
<label class="label-radio item-content"> 
<input type="radio" name="color-radio" value="blue" checked> 
<div class="item-inner"> 
<div class="item-title">Blue</div> 
</div> 
</label>     
</ul> 

<ul id="graygr"> 
<label class="label-radio item-content"> 
<input type="radio" name="color-radio" value="gray"> 
<div class="item-inner"> 
<div class="item-title">Gray</div> 
</div> 
</label> 
</ul> 

Und hier ist Thema Wechsler

<ul> 
<li> 
<label class="label-radio item-content"> 
<input type="radio" name="layout-radio" value="layout-dark" checked> 
<div class="item-inner"> 
<div class="item-title">Dark</div> 
</div> 
</label> 
</li> 
<li> 
<label class="label-radio item-content"> 
<input type="radio" name="layout-radio" value="layout-white"> 
<div class="item-inner"> 
<div class="item-title">Light</div> 
</div> 
</label> 
</li> 
</ul> 

Und hier ist die Javascript diejenigen machen Farbe und Thema Wechsler Arbeit

var myApp = new Framework7(); 
     var $$ = Dom7; 
     $$('input[name="color-radio"]').on('change', function() { 
     if (this.checked) { 
      $$('.view').removeClass('theme-blue theme-gray theme-lightblue'); 
      $$('.view').addClass('theme-' + $$(this).val()); 
     } 
     }); 
     $$('input[name="layout-radio"]').on('change', function() { 
     if (this.checked) { 
      $$('.view').removeClass('layout-dark layout-white'); 
      $$('.view').addClass(this.value); 
     } 
     }); 

Demo: http://qa.ftios.net/61-2

Aber wenn ich es ausprobiere, ändert es die Farbe und das Thema, aber wenn ich neu lade und es auf Standard zurücksetzt, so wie kann ich das beheben?

Answer 1

Sie haben die Auswahl nirgends gespeichert, so dass das DOM bei jedem erneuten Laden der Seite in den ursprünglichen Zustand zurückkehrt. Der einfachste Weg wäre, die Auswahl auf localStorage zu speichern, und wenn das Modul/die Seite aufgerufen wird, überprüfen Sie einfach, ob das Element vorhanden ist. Wenn dies der Fall ist, würden Sie das Thema basierend auf seinem Wert festlegen .