如何通过添加Cookie实现浏览器刷新后暗色模式logo状态保持不变

完整修改后JS代码 #

// 写入Cookie工具方法，days为存储有效期（天）
function setCookie(name, value, days) {
  let expires = ''
  if (days) {
    const date = new Date()
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
    expires = '; expires=' + date.toUTCString()
  }
  // 若站点为HTTPS，可在末尾追加 ; Secure 提升安全性
  document.cookie = name + '=' + (value || '') + expires + '; path=/'
}

// 读取Cookie工具方法
function getCookie(name) {
  const nameMatch = name + '='
  const cookieArr = document.cookie.split(';')
  for (let i = 0; i < cookieArr.length; i++) {
    let item = cookieArr[i].trim()
    if (item.indexOf(nameMatch) === 0) {
      return item.substring(nameMatch.length)
    }
  }
  return null
}

// 初始化logo状态，优先读取Cookie存储值，无存储则用默认亮色模式logo
var shown = getCookie('current_logo') || 'header_logo_ayar_1'

// 页面DOM加载完成后初始化logo显示样式
document.addEventListener('DOMContentLoaded', () => {
  if (shown === 'header_logo_ayar_2') {
    document.getElementById('header_logo_2').style.display = ''
    document.getElementById('header_logo_1').style.display = 'none'
  } else {
    document.getElementById('header_logo_1').style.display = ''
    document.getElementById('header_logo_2').style.display = 'none'
  }
})

function swap() {
  if (shown === 'header_logo_ayar_1') {
    document.getElementById('header_logo_2').style.display = ''
    document.getElementById('header_logo_1').style.display = 'none'
    shown = 'header_logo_ayar_2'
  } else {
    document.getElementById('header_logo_1').style.display = ''
    document.getElementById('header_logo_2').style.display = 'none'
    shown = 'header_logo_ayar_1'
  }
  // 切换后同步更新Cookie存储，默认有效期30天可自定义调整
  setCookie('current_logo', shown, 30)
}

适配说明 #

• 原有HTML代码、夜间模式按钮的onclick绑定无需修改，直接替换JS代码即可生效
• Cookie默认存储时长为30天，可通过修改setCookie调用的第三个参数自定义有效期
• 若你的站点已存在暗色模式全局状态的Cookie，可直接读取该状态值判断logo显示逻辑，无需新增单独的logo存储Cookie，减少冗余存储

内容的提问来源于stack exchange，提问作者Salih Toy