Slider not staying on when switching pages

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

Possible duplicate of [Best way to store small UI user preferences in web app?](https://stackoverflow.com/questions/6534535/best-way-to-store-small-ui-user-preferences-in-web-app) — Nick Parsons, Sep 28 '18 at 01:16

shiming · Answer 1 · 2018-09-29T01:28:01.463

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

Makes sense. But oddly enough the when I input the sessionStorage or even change it to local storage it seems to disable to slider.... What do you think that could be? — Chayton L., Sep 28 '18 at 12:20
Update to that, I got it to work but still having the issue with changing pages. — Chayton L., Sep 28 '18 at 12:40
I guess it is because you are using 'slider.addEventListener' to trigger the color change. For example, when a page is loaded and user does not really click on slider, it will display the css color instead of accessing the status value to display the color. You might need to read your status when page is loaded. — shiming, Sep 29 '18 at 00:55
@Chayton L. [How to run a function when the page is loaded](https://stackoverflow.com/questions/4842590/how-to-run-a-function-when-the-page-is-loaded) — shiming, Sep 29 '18 at 00:57

Slider not staying on when switching pages

1 Answers1