如何实现点击按钮切换localStorage中status状态的功能

核心修改逻辑 #

• 新增状态切换判断：点击时对比本地存储的当前status值和目标值，一致则清除状态，不一致则设置为目标值
• 补充状态清除逻辑：移除localStorage对应key，同步更新根元素类名
• 修正原自执行函数的语法闭合问题

完整修改后代码 #

// 设置状态
function setStatus(statusName) {
  localStorage.setItem('status', statusName);
  // 如果你有其他固定根类名，建议用classList.add避免覆盖，见下文优化说明
  document.documentElement.className = statusName;
}

// 清除状态
function clearStatus() {
  localStorage.removeItem('status');
  // 清除时如果要保留默认类名，此处修改为你的默认类名即可
  document.documentElement.className = '';
}

// 切换状态入口，按钮点击时直接调用该方法
function toggleStatus(targetStatus) {
  const currentStatus = localStorage.getItem('status');
  currentStatus === targetStatus ? clearStatus() : setStatus(targetStatus);
}

// 页面初始化读取本地状态渲染
(function () {
  if (localStorage.getItem('status')) {
    setStatus(localStorage.getItem('status'))
  }
})();

按钮绑定示例 #

给触发切换的按钮绑定点击事件，传入你要切换的目标状态值即可，示例如下：

const toggleBtn = document.querySelector('#你的按钮ID');
toggleBtn.addEventListener('click', () => {
  // 示例切换的状态值为dark，可替换为你自己的状态名
  toggleStatus('dark');
})

优化提示 #

如果根元素存在固定的默认类名，不要直接修改className属性，避免覆盖原有类，可改用类名操作方法：

// 优化后的设置方法
function setStatus(statusName) {
  localStorage.setItem('status', statusName);
  document.documentElement.classList.add(statusName);
}

// 优化后的清除方法
function clearStatus() {
  const currentStatus = localStorage.getItem('status');
  localStorage.removeItem('status');
  document.documentElement.classList.remove(currentStatus);
}

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