使用checkbox+cookie实现两个DIV切换并保存状态的技术求助

没问题，这需求很常见，我给你写了一套完整的实现代码，每部分都有说明，直接用就行～

1. HTML结构 #

先搭建基础的页面元素，给每个元素加上唯一ID，方便后续JS操作：

<label for="toggleDiv">切换显示状态</label>
<input type="checkbox" id="toggleDiv">

<div id="divA">这是Div A的内容</div>
<div id="divB">这是Div B的内容</div>

2. CSS样式 #

默认隐藏Div B，符合你的需求：

/* 默认状态下隐藏Div B */
#divB {
  display: none;
}

3. JavaScript逻辑 #

这里包含了Cookie读写、状态初始化和切换逻辑，核心是保存用户的选择状态，刷新页面也不会丢失：

// 封装Cookie操作的工具函数，简化读写
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();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
  const nameEQ = name + "=";
  const cookieArr = document.cookie.split(';');
  for(let i=0;i < cookieArr.length;i++) {
    let cookie = cookieArr[i];
    while (cookie.charAt(0)==' ') cookie = cookie.substring(1,cookie.length);
    if (cookie.indexOf(nameEQ) == 0) return cookie.substring(nameEQ.length,cookie.length);
  }
  return null;
}

// 获取DOM元素
const toggleCheckbox = document.getElementById('toggleDiv');
const divA = document.getElementById('divA');
const divB = document.getElementById('divB');

// 页面加载时，从Cookie恢复之前的状态
function initState() {
  const savedState = getCookie('divDisplayState');
  if (savedState === 'showB') {
    toggleCheckbox.checked = true;
    divA.style.display = 'none';
    divB.style.display = 'block';
  } else {
    // 默认回到初始状态：显示A，隐藏B
    toggleCheckbox.checked = false;
    divA.style.display = 'block';
    divB.style.display = 'none';
  }
}

// 切换Div显示状态的核心函数
function toggleDivs() {
  if (toggleCheckbox.checked) {
    // 勾选时：隐藏A，显示B
    divA.style.display = 'none';
    divB.style.display = 'block';
    setCookie('divDisplayState', 'showB', 30); // 状态保存30天，可自行调整
  } else {
    // 取消勾选时：显示A，隐藏B
    divA.style.display = 'block';
    divB.style.display = 'none';
    setCookie('divDisplayState', 'showA', 30);
  }
}

// 页面加载完成后立即初始化状态
initState();

// 给复选框绑定切换事件
toggleCheckbox.addEventListener('change', toggleDivs);

关键细节说明 #

• Cookie的过期时间我设成了30天，你可以根据需求修改setCookie函数的第三个参数；
• 页面加载时会自动读取Cookie里的状态，用户刷新页面或者重新打开网站时，会保留上次的选择；
• 所有DOM操作都用了原生JS，不需要依赖任何框架，兼容性很好。

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