当访问者在页面之间移动时，如何使 toggleClass 更改持续存在？

Question

撇开潜在的编码效率问题不谈，我为我的切换按钮组合了一个 jQuery 函数。单击打开和关闭开关时，网站会应用各种 CSS 类和暗模式样式。这非常有效：

$(function() {
   $(".slider.round").click(function() {
     $("#canvas-wrapper").toggleClass("dark-canvas");
     $("#page-body-wrapper p").toggleClass("dark-body-text");
     $("h2, h3, .summary-title a, .summary-read-more-link, .summary-excerpt a, #block-yui_3_17_2_32_1456852631790_12688 a").toggleClass("dark-headings-links");
     $("#block-yui_3_17_2_2_1457035305182_118918 h2").toggleClass("dark-intro");
     $(".summary-item").toggleClass("dark-summary");
     $(".summary-excerpt strong, #sidebar-one h2").toggleClass("dark-excerpt-sidebar");
     $("#sidebar-one, .sqs-col-1").toggleClass("dark-sidebar");
     $(".summary-metadata-item a, .summary-metadata-item--date").toggleClass("dark-metadata");
   });
});

但是，有一个大问题。假设访问者打开黑暗模式，相应地改变外观。当他们重新加载页面或在页面之间移动时，此状态每次都会自行重置。当用户浏览一个深色界面时，这会很刺耳，然后突然呈现一个以白色为主的设计。

我可以向此函数添加什么以允许这些 toggleClass 状态在页面之间持续存在？另一位用户将我指向 localStorage 和 sessionStorage。不幸的是，我在 jQuery 方面仍然是个新手，缺乏将复杂事物组合在一起的知识——更不用说理解相关术语了。

有人可以帮忙吗？这将是一个巨大的帮助和进步！

感谢百万人，你们是摇滚明星:)

Answer 1

我建议您直接在 CSS 文件中简化代码。绝对没有必要使用 JavaScript 为每个元素添加大量 classes。

相反，您可以使用一个 class，我们称它为 "mode--dark"，我们会将其添加到正文中。

在你的 CSS 中，这个 class 可以是这样的：

.mode--dark #canvas-wrapper {
 // your styles
}

.mode--dark #page-body-wrapper p {
 // your styles
}


//--------------------> right after body script start (this should go right after <body> tag
function getMode() {
    // let's check whether key "mode" exists in our localStorage and if so return true, false otherwise
    return localStorage.getItem('mode') == 'true' ? true : false;
}

var body = document.querySelector('body'),
      modeClass = 'mode--dark',
      switchClass = 'js-switch'; // add any class name to your input for switching between themes and retype it here


if (getMode()) {
    body.classList.add(modeClass);
}

document.addEventListener('change', function (e) {
    var target = e.target;

    if (target.className.indexOf(switchClass) > -1) {
        if(!getMode()) {
            body.classList.add(modeClass);
            // set dark mode to true
            localStorage.setItem('mode', true);
        } else {
            body.classList.remove(modeClass);
            // set dark mode to false
            localStorage.setItem('mode', false);
        }
    }
});

//--------------------> right after body script end

//--------------------> this can be put anywhere start
document.addEventListener('DOMContentLoaded', function (e) {
    var switchInput = document.querySelector('.' + switchClass);

    if(getMode()) {
        switchInput.checked = true;
    }
});
//--------------------> this can be put anywhere end

Answer 2

您遇到的问题是数据层和视图层之间缺乏分离的症状。您不想在用户单击切换按钮时直接更改 html，而是希望更新数据层，然后重新呈现视图。理想情况下，您将使用某种 javascript 模板来呈现您的 html，例如 lodash 的 template 函数，或者像 angular/react 这样的框架。但是，我保留了仅使用 jquery 的示例。流程看起来像这样：

初始页面加载： Data -> View

切换： Update Data -> Rerender View

所以你在一个变量中跟踪你的黑暗模式，然后在它改变时更新你的html：

var localStorageKey = 'appState';
var appState;

function loadState() {
    const json = localStorage[localStorageKey];

    if (json) appState = JSON.parse(json);
    else appState = {};
}

function saveState() {
    localStorage[localStorageKey] = JSON.stringify(appState);
}

function render() {
    $('body').toggleClass('mode--dark', state.isDarkMode);
}

loadState();
render();

$('.darkModeToggle').click(function() {
    appState.isDarkMode = !appState.isDarkMode;
    saveState();
    render();
});

当访问者在页面之间移动时，如何使 toggleClass 更改持续存在？

How to make toggleClass changes persist as visitor moves between pages?

javascript

jquery

session-state

local-storage