1

I'm using two stylesheets to improve the dark/light mode in my website but after refreshing the website it lost the chosen stylesheet and came back to default as it coded in the index file, I heard about sessionStorage in JavaScript but I couldn't use it in my code.

And here is my code:

  • Index.html
  <link href="assets/css/style.css" rel="stylesheet" id="lnk">
    
  <script>
    function toggleTheme() {
        link = document.getElementById("lnk");
        if (link.getAttribute('href') == 'assets/css/style.css') {
            link.setAttribute('href', 'assets/css/darkstyle.css');
            const element = document.getElementById("dark-mode");
            element.innerHTML = "<i class='bx bxs-moon'></i>";
        } else {
            link.setAttribute('href', 'assets/css/style.css');
            const element = document.getElementById("dark-mode");
            element.innerHTML = "<i class='bx bx-moon'></i>";
        }

        sessionStorage.setItem("autosave", link);
    }
  </script>
  • Button to toggle the theme
<button onclick="toggleTheme()" class="dark" id="dark-mode"><i class="bx bx-moon"></i></button>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Hazem Behairy
  • 89
  • 1
  • 7
  • Your code as shown does not use `sessionStorage`. Why couldn't you use it? What happened when you tried? What kind of error did you experience? What was the code at that time? – Amadan Aug 05 '21 at 03:31
  • Actually there is no errors it just work and passes the `sessionStorage` like it doesn't exist in the code. – Hazem Behairy Aug 05 '21 at 04:14

2 Answers2

0

What is Local Storage and Session Storage?

localStorage and sessionStorage accomplish the exact same thing and have the same API, but with sessionStorage the data is persisted only until the window or tab is closed, while with localStorage the data is persisted until the user manually clears the browser cache or until your web app clears the data.

Now coming to your problem :

In case you wish to render dark mode from server side then you need to request from server in order to do that, like

document.cookie = "darkmode=true"

else you can do it to client side, if you don't know how to make request to server. Change

sessionStorage.setItem("autosave", link);

in your script to

localStorage.setItem("autosave", link);

This should work.

its_shyam640
  • 59
  • 8
  • Yes it should work. I saw someone doing your way and it worked with him but I don't know where is the problem this time! – Hazem Behairy Aug 05 '21 at 04:06
  • You did session storage which requires storing of darkmode somewhere. But local storage remain even if you refesh the page until and unless user doesn't clears cache and site data. Did you project has something to store user session? – its_shyam640 Aug 05 '21 at 04:12
  • Do upvote if you feel your doubt has been cleared! – its_shyam640 Aug 05 '21 at 04:16
  • No actually I don't, and I'm not familiar with the session storage it's my first time using this in my code so I have no idea how it works correctly and what does it requires exactly? – Hazem Behairy Aug 05 '21 at 04:18
  • Then read about local storage and session storage to better understand it. Refer https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies – its_shyam640 Aug 05 '21 at 04:21
0

Please try this out.. you should check the session storage before updating and change the link accordingly and you should update session storage with the new link so the last selected mode can be persisted

sessionStorage.setItem("autosave", 'assets/css/style.css');

set session storage by default to the light mode by adding the above line at the top of your script so by default it will be light mode

function toggleTheme() {
        link = document.getElementById("lnk");
        let previousLink = sessionStorage.getItem("autosave")
        if (previousLink == 'assets/css/style.css') {
            link.setAttribute('href', 'assets/css/darkstyle.css');
            sessionStorage.setItem("autosave", 'assets/css/darkstyle.css');
            const element = document.getElementById("dark-mode");
            element.innerHTML = "<i class='bx bxs-moon'></i>";
        } else {
            link.setAttribute('href', 'assets/css/style.css');
            sessionStorage.setItem("autosave", 'assets/css/style.css');
            const element = document.getElementById("dark-mode");
            element.innerHTML = "<i class='bx bx-moon'></i>";
        }

    }

if you find any difficulty let me know in comments

udaya
  • 1
  • 1