Введите радио изменить тему и сохранить в местном хранилище

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

Вот как вы делаете переключатель:

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

Когда происходит переключение на переключатель:

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

Для локального хранилища:

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

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

Answer 2

Вот ресурс о том, как HTML DOM должен выглядеть для радиокнопок

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

---

Вот как вы используете jQuery для прослушивания взаимодействий радиокнопок, если вы нене указывайте класс или идентификатор для него, где вы просто заменяете input[type=radio] на свой класс / идентификатор:

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

---

Вот как вы используете localstorage

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 и проанализировать при извлечении.