咨询：如何利用Session/LocalStorage跨页面保存元素显隐状态

完全可以通过 Session Storage 或 Local Storage 实现这个需求！这两个都是浏览器原生提供的本地存储API，专门用来在客户端留存数据，完美匹配你“页面退出后重新进入保留元素状态”的需求。下面结合你的代码给你具体实现方案：

核心思路 #

1. 切换元素显示状态时，把当前的状态（"block" 或 "none"）存入存储中
2. 页面加载完成后，从存储里读取之前保存的状态，自动还原元素的显示/隐藏状态

两种存储方案的区别 #

• Session Storage：数据仅在当前浏览器会话中保留，关闭标签页或浏览器后数据会被清除，适合只需要在会话内留存状态的场景
• Local Storage：数据会持久保存在浏览器中，即使关闭浏览器再重新打开，数据依然存在，适合需要长期留存状态的场景

你可以根据需求二选一，下面分别给出完整实现代码：

用Local Storage实现的代码 #

<button onclick="myFunction()">Try it</button>
<div id="myDIV"> This is my DIV element. </div>

<script>
// 页面加载时自动恢复之前的状态
window.addEventListener('DOMContentLoaded', function() {
  const savedState = localStorage.getItem('divDisplayState');
  const targetDiv = document.getElementById('myDIV');
  if (savedState) {
    targetDiv.style.display = savedState;
  } else {
    // 设置默认显示状态（如果没有保存过状态的话）
    targetDiv.style.display = 'block';
  }
});

function myFunction() {
  const x = document.getElementById("myDIV");
  let newDisplayState;
  if (x.style.display === "none") {
    newDisplayState = "block";
    x.style.display = newDisplayState;
  } else {
    newDisplayState = "none";
    x.style.display = newDisplayState;
  }
  // 将最新状态保存到Local Storage
  localStorage.setItem('divDisplayState', newDisplayState);
}
</script>

用Session Storage实现的代码 #

只需要把上面代码中的 localStorage 替换成 sessionStorage 即可，逻辑完全一致：

// 页面加载时恢复状态
window.addEventListener('DOMContentLoaded', function() {
  const savedState = sessionStorage.getItem('divDisplayState');
  const targetDiv = document.getElementById('myDIV');
  if (savedState) {
    targetDiv.style.display = savedState;
  } else {
    targetDiv.style.display = 'block';
  }
});

function myFunction() {
  const x = document.getElementById("myDIV");
  let newDisplayState;
  if (x.style.display === "none") {
    newDisplayState = "block";
    x.style.display = newDisplayState;
  } else {
    newDisplayState = "none";
    x.style.display = newDisplayState;
  }
  // 将最新状态保存到Session Storage
  sessionStorage.setItem('divDisplayState', newDisplayState);
}

小提示 #

• 存储的键名（比如这里的divDisplayState）可以自定义，只要确保在需要共享状态的页面中保持一致就行
• 如果有多个元素需要保存状态，可以给每个元素设置唯一键名，或者把多个状态打包成一个对象，用JSON.stringify转成字符串存储，读取时再用JSON.parse解析还原

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