Question

0

48

Views

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-25T23:03:19.425Z

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