Tengo unos inputs type="radio" cuando le hago click cambia la hoja de estilos y cambia los colores del index.html
Ahora yo quiero que al recargar la página se conserven dichos cambios hasta que el usuarios seleccione otro input para cambiarlos.
Para eso quiero guardar las preferencia en el local storage para eso hice lo siguiente:
efectivamente el valor del href se guarda en el local storage, pero no sse como hacer para que al recargar la página conserve la preferencia del usuario, en la variable z trate de obtener el valor del item guardado y reemplazarlo en el href, pero tampoco me funcionó.
Gracias por la ayuda.
// Capturando los value
var selects_value = document.querySelectorAll("input");
for(i=0; i<selects_value.length; i++){
selects_value[i].addEventListener("click", function(){
var mode_value = this.value;
switch (mode_value) {
case "normal-mode":
document.querySelector("#css-modes").setAttribute("href", "css/styles.css");
break;
case "light-mode":
document.querySelector("#css-modes").setAttribute("href", "css/light-mode.css");
break;
case "dark-mode":
document.querySelector("#css-modes").setAttribute("href", "css/dark-mode.css");
break;
case "blue-mode":
document.querySelector("#css-modes").setAttribute("href", "css/blue-mode.css");
break;
}
if(typeof(Storage) !== "undefined"){
var x = document.querySelector("#css-modes").getAttribute("href");
localStorage.setItem("href_styles", x);
// var z = localStorage.getItem("href_styles");
document.querySelector("#css-modes").setAttribute("href", localStorage.href_styles);
// document.querySelector("#css-modes").setAttribute("href", z);
}
});
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link id="css-modes" rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Karla|Rubik&display=swap" rel="stylesheet">
<script src="js/all.js"></script>
<title>Mi canal de podcast</title>
</head>
<body>
<header>
<div class="container">
<div class="img-container">
<img src="images/logo.png" alt="mi podcast">
</div>
<!-- <input type="checkbox" id="btn-menu" class="btn-menu"> -->
<!-- <label class="bars-open-menu" id="bars-open-menu" for="btn-menu"><i class="fas fa-bars"></i></label> -->
<!-- <label class="x-close-menu" id="x-close-menu" for="btn-menu"><i class="fas fa-times"></i></label> -->
<span class="bars-open-menu" id="bars-open-menu"><i class="fas fa-bars"></i></span>
<span class="x-close-menu" id="x-close-menu"><i class="fas fa-times"></i></span>
<nav class="menu" id="menu">
<ul>
<li><a class="menu-options" href="#episodes">EPISODIOS</a></li>
<li><a class="menu-options" href="#us">NOSOTROS</a></li>
<li><a class="menu-options" href="#interviews">ENTREVISTAS</a></li>
<li><a class="menu-options" href="#topics">TÓPICOS</a></li>
<li id="modes-btn"><span><i class="fas fa-cog"></i></span></li>
</ul>
<div id="modes_menu" class="modes_menu modes_menu-hide">
<ul>
<h4>Seleccione un modo</h4>
<li>
<label for="normal-mode">Normal mode</label>
<input checked type="radio" id="normal-mode" name="modes-menu" value="normal-mode">
</li>
<li>
<label for="light-mode">Light mode</label>
<input type="radio" id="light-mode" name="modes-menu" value="light-mode">
</li>
<li>
<label for="dark-mode">dark mode</label>
<input type="radio" id="dark-mode" name="modes-menu" value="dark-mode">
</li>
<li>
<label for="blue-mode">Blue mode</label>
<input type="radio" id="blue-mode" name="modes-menu" value="blue-mode">
</li>
</ul>
</div>
</nav>
</div>
</header >
</body>
<script src="js/effects.js"></script>
</html>