切换页面时滑块不停留

Question

我制作了主题滑块，网站的滑块从浅色变为深色。我的问题是，当用户使用滑块并加载不同的页面或刷新当前页面时，主题会切换回浅色模式。我怎样才能以某种方式保存用户的选择/选择？当前链接http://discordlokibot.ml/index.html

HTML

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

CSS **不确定是否需要，请告诉我

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

因为您正在刷新页面/跳转到另一个页面，如果您没有缓存任何内容，这可能会刷新您的 DOM。当您尝试在加载时获取此页面上的元素时，它将始终获得 css 默认值。

我建议你可以将路由中的状态值保存为参数或查询，例如http://discordlokibot.ml/index.html?status=dark，然后从路由中获取状态

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

其他解决方案可能是：

(1) 如果您下次不想访问此值，请将此值保存到浏览器的会话存储中

 // 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) 或者如果下次要使用这个值，把这个值保存到本地存储

---

只有在检测到“点击”事件时才会访问该状态。为了实现同页模式，我们需要在页面加载时访问保存的值：

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