切换页面时滑块不停留

Question

I have made theme slider, the slider changes from light to dark for the website. My issue is that when a user uses the slider and loads a different page or refreshes the current page the theme switches back to light mode. How can I somehow save the user's selection/choice? Current link http://discordlokibot.ml/index.html

HTML

<div>    
  <div id="nav">
    <div id="slider-background">
    <div id="slider" class="indexSlider">
  </div>
</div>

CSS **Not sure if needed so let me know

JS

var status = 'light';
var slider = document.getElementById('slider')
var sliderbg = document.getElementById('slider-background')
var nav = document.getElementById('nav')
var mainback = document.getElementById('backmain')
var footer = document.getElementById('footer')
var text = document.querySelectorAll('p,li,a,h1,h2,h3')
var windows = document.querySelectorAll('#window1,#window2,#window3,#window4')
var announcement = document.querySelector('#announcement')
var closebtn = document.querySelector('.close-btn')
var whiteimages = document.querySelectorAll('.white-images')
var blackimages = document.querySelectorAll('.black-images')

slider.addEventListener('click', function() {
    if (status == 'light') {
        status = 'dark'
        nav.style.background = '#282A2E'
        footer.style.background = '#282A2E'
        backmain.style.background = '#1D1F21'
        sliderbg.style.background = '#f2f2f2'
        slider.style.background = '#000'
        slider.style.marginLeft = '1.6em'
        for (i = 0; i < text.length; i++) {
            text[i].style.color = '#f2f2f2'
        }
        for (i = 0; i < windows.length; i++) {
            windows[i].style.background = '#282A2E'
        }
        for (i = 0; i < whiteimages.length; i++) {
            whiteimages[i].style.display = 'inline-block'
        }
        for (i = 0; i < blackimages.length; i++) {
            blackimages[i].style.display = 'none'
        }
    } else {
        status = 'light'
        nav.style.background = '#f2f2f2'
        footer.style.background = '#f2f2f2'
        sliderbg.style.background = '#000'
        slider.style.background = '#f2f2f2'
        slider.style.marginLeft = '0.2em'
        backmain.style.background = '#e5e5e5'
        for (i = 0; i < text.length; i++) {
            text[i].style.color = '#000'
        }
        for (i = 0; i < windows.length; i++) {
            windows[i].style.background = '#f2f2f2'
        }
        for (i = 0; i < whiteimages.length; i++) {
            whiteimages[i].style.display = 'none'
        }
        for (i = 0; i < blackimages.length; i++) {
            blackimages[i].style.display = 'inline-block'
        }
    }
})

closebtn.addEventListener('click', function() {
    announcement.style.height = '0px'
    setTimeout(function() {
        announcement.style.display = 'none'
    }, 510)
})

Answer 1

Because you are refreshing a page/jumping to another page, which might refresh your DOM if you did not cache anything. When you try to get an element on this page when loaded it will always get the css default value.

I will suggest that you can save the status value in your route as a param or query, eg, http://discordlokibot.ml/index.html?status=dark , then get status from route

 // get your query in route let query = new URLSearchParams(window.location.search); let status = query.get("status") || 'light'; 

Other solutions might be:

(1) Save this value to session storage on browsers if you do not want to access this value next time

  // when user click on slider if (window.sessionStorage) { sessionStorage.setItem("slider-status", 'light'); } // when user jump/fresh page if (window.sessionStorage) { let status = sessionStorage.getItem("slider-status") || 'light'; ... } 

(2) Or save this value to local storage if you want to use this value next time

---

The status is only accessed when 'click' event is detected. To achieve keeping same page mode, we need to access the saved value when page loaded:

 function initStatus() { // access your status value in storage // if storage is emtpy, set a default value // assign different color based on your 'status' } window.onload = initStatus();