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，並在調用該模塊/頁面時，只需檢查項目是否存在以及是否存在，根據其值設置主題爲。