如何将文本显示/隐藏状态保存到WebStorage，刷新页面保持状态？

我来帮你一步步搞定这个需求，其实整合localStorage并没有你想的那么复杂～ 下面我会把完整的代码和每个步骤的解释都写清楚，适合新手理解：

第一步：基础HTML结构 #

先搭建好页面的基本元素，一个触发切换的链接，和需要隐藏/显示的文本块：

<!-- 切换链接 -->
<a href="#" id="toggleLink">显示文本</a>

<!-- 要控制显示/隐藏的文本 -->
<div id="toggleText" style="display: none;">
  这是你想要隐藏或显示的内容哦！
</div>

第二步：整合localStorage的JavaScript代码 #

接下来写核心的JS逻辑，分初始化状态和点击切换并保存状态两部分：

// 1. 获取页面上的DOM元素
const toggleLink = document.getElementById('toggleLink');
const toggleText = document.getElementById('toggleText');

// 2. 页面加载时，从localStorage读取之前保存的状态
const savedVisibility = localStorage.getItem('textVisibility');

// 根据保存的状态设置初始显示效果
if (savedVisibility === 'visible') {
  toggleText.style.display = 'block';
  toggleLink.textContent = '隐藏文本';
} else {
  // 如果没有保存过状态，默认隐藏文本
  toggleText.style.display = 'none';
  toggleLink.textContent = '显示文本';
}

// 3. 给链接添加点击事件处理
toggleLink.addEventListener('click', function(e) {
  // 阻止链接默认的跳转行为（因为href是#，会跳转到页面顶部）
  e.preventDefault();

  // 判断当前文本的显示状态
  const isCurrentlyVisible = toggleText.style.display === 'block';

  if (isCurrentlyVisible) {
    // 隐藏文本，更新链接文字，同时保存状态到localStorage
    toggleText.style.display = 'none';
    toggleLink.textContent = '显示文本';
    localStorage.setItem('textVisibility', 'hidden');
  } else {
    // 显示文本，更新链接文字，保存状态
    toggleText.style.display = 'block';
    toggleLink.textContent = '隐藏文本';
    localStorage.setItem('textVisibility', 'visible');
  }
});

关键知识点解释 #

• localStorage的用法：localStorage.setItem(key, value)用来保存数据，localStorage.getItem(key)用来读取数据，这里我们用textVisibility作为键，值用'visible'或'hidden'来标记状态。
• 初始化逻辑：页面加载时先读取保存的状态，这样刷新页面后就能恢复之前的显示/隐藏状态。
• 阻止默认行为：因为链接的href是#，点击会默认跳转到页面顶部，所以用e.preventDefault()来取消这个行为。

额外小提示 #

如果你希望状态只在当前会话有效（关闭浏览器就清除），可以把localStorage换成sessionStorage，用法完全一样～

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