代码之家 › 专栏 › 技术社区 › Chayton L.

切换页面时滑块未保持打开状态

javascript

Chayton L. · 技术社区 · 8 年前

我已经做了主题滑块,滑块的变化从光明到黑暗的网站。我的问题是,当用户使用滑块加载不同的页面或刷新当前页面时,主题会切换回灯光模式。如何以某种方式保存用户的选择/选择?当前链接 http://discordlokibot.ml/index.html

HTML

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

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

1 回复 | 直到 8 年前

shiming 8 年前

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';
    ...
 }

仅当检测到“单击”事件时,才会访问该状态。为了保持页面模式不变,我们需要在加载页面时访问保存的值:

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