framework7 - 重新加载页面时如何保持单选按钮的选择？

Question

我在我的framework7应用程序制作主题更换，这里是用单选按钮

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

换色器的代码这里是主题换

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

这里是制作者的JavaScript的颜色和主题更换工作

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

演示：http://qa.ftios.net/61-2

但是当我尝试了它，它确实会改变颜色和主题，但是当我重新加载并且它恢复为默认时，那么我该如何解决这个问题？

Answer 1

您没有在任何位置存储选择，所以每次重新加载页面时，DOM都会恢复到原始状态。

最简单的方法是将选择保存到localStorage，并在调用该模块/页面时，只需检查项目是否存在以及是否存在，根据其值设置主题为。