如何为横幅关闭的onClick逻辑设置localStorage，实现刷新后保持关闭状态？

现有代码说明 #

你当前的关闭按钮代码：

<button id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</button>

原JS代码存在语法缺失（未闭合函数），修正后如下：

window.onload = function(){
  document.getElementById('close').onclick = function(){
    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
    return false;
  }
}

实现方案 #

要通过localStorage保存关闭状态，只需在关闭时记录状态，并在页面加载时读取状态判断是否隐藏横幅：

1. 完整修改后的JS代码 #

window.onload = function(){
  // 获取关闭按钮和横幅元素
  const closeBtn = document.getElementById('close');
  const bannerElement = closeBtn.parentNode.parentNode;

  // 页面加载时检查本地存储的状态
  if (localStorage.getItem('isBannerClosed') === 'true') {
    bannerElement.remove();
    return; // 横幅已隐藏，无需绑定点击事件
  }

  // 绑定关闭按钮点击事件
  closeBtn.onclick = function() {
    bannerElement.remove();
    // 存储横幅已关闭的状态
    localStorage.setItem('isBannerClosed', 'true');
    return false;
  }
}

关键说明 #

• 用localStorage.setItem()存储关闭状态，键名可自定义（这里用isBannerClosed），值为字符串'true'（localStorage仅支持字符串存储）
• 页面加载时优先读取localStorage.getItem()的结果，若为'true'则直接移除横幅
• 如果需要恢复横幅显示，可在浏览器控制台执行localStorage.removeItem('isBannerClosed')，或者手动清除浏览器本地存储中的对应条目

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