如何使用Local Storage实现按钮点击展开内容在页面刷新后仍保持显示状态

实现方案 #

核心逻辑是每次触发切换时将显示状态写入localStorage，页面初始化时优先读取localStorage的状态设置元素显隐，修改后的代码如下：

完整JS代码 #

$(document).ready(function () {
  // 页面初始化时读取本地存储的状态
  const childBoxStatus = localStorage.getItem('childBoxIsOpen')
  // 如果存储的状态是打开，直接显示元素，否则保持默认隐藏
  if (childBoxStatus === 'open') {
    $('.child_box').show()
  }

  // 按钮点击事件
  $(".open_child").click(function(z){
    $(".child_box").toggle(z, function() {
      // 切换完成后，将最新状态存入localStorage
      const isOpen = $(this).is(':visible')
      localStorage.setItem('childBoxIsOpen', isOpen ? 'open' : 'close')
    })
  })
})

注意事项 #

• 如果页面上有多个需要独立控制显隐的.child_box，可以给每个元素加唯一标识，对应存储不同的localStorage键名，避免状态互相覆盖
• localStorage是永久存储，只要用户不手动清除浏览器缓存，状态会一直保留，符合「直到用户手动点击关闭才隐藏」的需求

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