如何让jQuery代码在页面刷新或页面跳转后保持生效？

你的代码目前只实现了点击切换暗黑模式并设置cookie，但缺少页面初始化时读取cookie恢复状态的逻辑，所以刷新或跳转页面后会回到初始状态。下面是修正后的完整代码，同时修复了几个细节问题：

// DOM加载完成后执行初始化逻辑
$(document).ready(function() {
  // 读取darkmode cookie的值
  const darkModeEnabled = $.cookie('darkmode') === 'enabled';
  
  // 如果cookie标记为开启，直接应用暗黑模式类
  if (darkModeEnabled) {
    $('.header-wrap').addClass('dark-header');
    $('.site-header__logo').addClass('dark-logo');
    $('.page-container').addClass('dark-body');
    // 更新按钮文本为"Light Mode"
    $('#dmbutton').text('Light Mode');
  }

  // 暗黑模式按钮点击事件
  $('.darkmode-button').click(function() {
    // 切换各类
    $('.header-wrap').toggleClass('dark-header');
    $('.site-header__logo').toggleClass('dark-logo');
    $('.page-container').toggleClass('dark-body');
    
    // 切换后判断当前状态，更新cookie和按钮文本
    const isDarkNow = $('.header-wrap').hasClass('dark-header');
    $.cookie('darkmode', isDarkNow ? 'enabled' : 'disabled', { 
      path: '/', // 确保cookie在整个网站生效
      expires: 365 // 设置过期时间为1年，可选
    });
    
    // 更新按钮文本
    $('#dmbutton').text(isDarkNow ? 'Light Mode' : 'Dark Mode');
  });
});

关键修改说明： #

• 页面初始化逻辑：在DOM加载完成后，先读取darkmode cookie的值，根据值直接应用对应的暗黑模式类和按钮文本，确保页面加载时就恢复之前的设置。
• 修正cookie设置逻辑：原代码每次点击都把cookie设为enabled，这会导致切换回浅色模式时cookie状态错误。现在根据切换后的实际状态，将cookie设为enabled或disabled。
• 添加cookie作用域：设置path: '/'确保cookie在网站所有页面都能被读取，避免不同页面cookie隔离的问题。
• 整合按钮文本更新：把原changeText函数的逻辑直接整合到点击事件和初始化逻辑中，减少冗余代码。

内容的提问来源于stack exchange，提问作者Bilal Naseer