Question

目前，我有这个用于切换主题的方法：

<link rel="stylesheet" type="text/css" href="css/style.css" class="switch">

<div id="Switch">
  <a href="#" rel="css/style.css">My theme 1</a>
  <a href="#" rel="css/style2.css">My theme 2</a>
</div>

$("div#Switch a").click(function() {
  $("link.switch").attr("href", $(this).attr('rel'));
});

我想找到一种解决方案，将链接转换为单选按钮，并将选择保存在localStorage中，并在刷新时回调。

Answer 1

Here's a resource for how the HTML DOM should look like for radio buttons

<div>
  <input type="radio" id="huey" name="drone" value="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

如果您没有为其指定类或ID，则可以使用jQuery来侦听单选按钮的交互，这里您只需将input[type=radio]替换为类/ ID：

$('input[type=radio]').change(function() {
    console.log(this.value);
});

这是您使用本地存储的方式

localStorage.setItem('key', 'value');

var val = localStorage.getItem('key');

如果要将对象保存在localStorage中，建议您使用JSON对其进行序列化/反序列化：

// Convert object to JSON string
var json = JSON.toJSON(object);

// Convert object from JSON to string
var obj = JSON.parse(json);

，并将其保存在转换后的JSON字符串中，保存到localStorage中，并在提取时进行解析。

Answer 2

这是您制作单选按钮的方式：

<input type='radio' id='ww' name='xyz'/>
<input type='radio' name='xyz'/>

当更改为单选按钮时：

if (document.getElementById('ww').checked) {
  console.log(document.getElementById('ww').value);
}

对于localStorage：

localStorage.setItem('k','xyz');

var a = localStorage.getItem('k');

输入广播更改主题并保存在本地存储中

2 个答案: