Tengo una web que tiene 2 temas una es el modo dark y otra el modo light. Todo los cambios me guardan, puedo refrescar la página con localStorage y mantener los cambios, pero me falta 2 imágenes (logotipo-dark/logotipo-light) momentáneamente estoy usando las rutas absolutas de las imágenes para al momento de darle click a un boton esta imagen cambie y al darle otro click regrese (modo dark y light) ahora me falta guardar estos cambios en cache usando las mismas rutas absolutas para que no se borren al darle refrescar a la página.
/* ================ Logo light and dark ================ */
let imagenLogo = "dark";
function miFuncion() {
var logotipo = document.getElementById("logo-imagen");
if (imagenLogo == "dark") {
logotipo.src = "https://xn--robertio-j3a.com/img/logos/logo-light.png";
imagenLogo = "light";
} else {
logotipo.src = "https://xn--robertio-j3a.com/img/logos/logo-dark.png";
imagenLogo = "dark";
}
}
/====== HTML =======/
<!-- HTML - style switcher start -->
<div class="style-switcher outer-shadow">
<div onclick="miFuncion();" class="day-night s-icon outer-shadow hover-in-shadow">
<i class="fas"></i>
</div>
<div class="style-switcher-toggler s-icon outer-shadow hover-in-shadow">
<i class="fas fa-cog fa-spin"></i>
</div>
</div>
<!-- style switcher end -->