Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

197
Vistas
How to set localstorage onClick?

I want to know how can I dynamically set (also update) new localstorage on OnClick function. I'm newbie in javascipt - i have created this switch dark/light theme function but i don't know what do next.

What do i want to get? - set or update theme (dark or light) on click in localstorage. I would like visitors to save their settings by clicking on local storage. After refresh - if they saved "dark theme" - they will get dark theme, else - light theme

// Wait for document to load
document.addEventListener("DOMContentLoaded", function(event) {

  // ****************************************

  // Variables Settings

  // ****************************************


  // Default Set "light" for Body on load
  document.documentElement.setAttribute("data-theme", "light");

  // Get Elements
  var themeSwitcher = document.getElementById("theme-switcher");
  var iconSwitcher = document.getElementById("theme-icon");
  var logoSwitcher = document.getElementById("navbar-logo");

  // Icons for Theme Switcher
  var lightIconTheme = "<i class='fa-solid fa-moon fa-lg'></i>"; 
  var darkIconTheme = "<i class='fa-solid fa-sun'></i>"; 

  // Logo for Theme Switcher
  var lightLogo = "assets/images/logo.svg";
  var darkLogo = "assets/images/logo-dark.svg";


  // ****************************************

  // ** On Click Event ** //

  // ****************************************

  themeSwitcher.onclick = function() {

    // Get the current selected theme, on the first run
    // it should be `light`
    var currentTheme = document.documentElement.getAttribute("data-theme");

    // Switch between `dark` and `light`
    var switchToTheme = currentTheme === "dark" ? "light" : "dark";

    // Switch between Icons
    var switchedTheme = currentTheme === "dark" ? lightIconTheme : darkIconTheme;

    // Switch between Logo
    var switchedLogo = currentTheme === "dark" ? lightLogo : darkLogo;

    // Set our currenet theme to the new one
    document.documentElement.setAttribute("data-theme", switchToTheme);

    // Set our current icon to the new one
    iconSwitcher.innerHTML = switchedTheme;

    // Set our current logo to the new one
    logoSwitcher.innerHTML = "<img src='"+ switchedLogo +"' class='img-fluid' />";
  }


  // End Function()
}); // not remove
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Try some thing like

// Read from local storage, if not already have, write the default value
const theme = localStorage.getItem("theme");
if (!theme) {
  localStorage.setItem("theme", "light");
}

// In on onClick, read from local storage
const currTheme = localStorage.getItem("theme");
const newTheme = currTheme === "light" ? "dark" : "light";

// udpdate theme in local storage
localStorage.setItem("theme", newTheme);
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda