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

我正在我的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>

演示：

---

但当我尝试时，它确实会更改颜色和主题，但当我重新加载时，它会恢复为默认值，那么我如何修复此问题？

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

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

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

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