如何点击后隐藏元素并24小时保持隐藏（jQuery/原生JS实现）

你的代码问题在于用了sessionStorage——它只在当前浏览器会话有效，关闭浏览器就会清空，而且没设置过期时间，所以没法满足24小时跨页面保持隐藏的需求。下面给你两种可行的实现方案：

方案一：jQuery版本 #

核心思路是用localStorage存储隐藏状态和过期时间，页面加载时先校验状态是否有效，再决定元素显示/隐藏：

$(document).ready(function() {
  const promoElement = $('#active-promos');
  // 从localStorage获取存储的信息
  const promoData = JSON.parse(localStorage.getItem('promoHideData')) || {};
  const now = Date.now();

  // 检查是否有有效的隐藏记录（存在且未过期）
  if (promoData.hideUntil && now < promoData.hideUntil) {
    promoElement.removeClass('show bell');
  } else {
    promoElement.addClass('show');
  }

  $('.close-promos').click(function() {
    // 设置24小时后的过期时间
    const hideUntil = now + 24 * 60 * 60 * 1000;
    // 存储状态和过期时间
    localStorage.setItem('promoHideData', JSON.stringify({ hideUntil }));
    // 隐藏元素
    promoElement.removeClass('show bell');
  });
});

方案二：原生JavaScript版本 #

如果不想依赖jQuery，原生JS也能实现同样逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const promoElement = document.getElementById('active-promos');
  const closeBtn = document.querySelector('.close-promos');
  const promoData = JSON.parse(localStorage.getItem('promoHideData')) || {};
  const now = Date.now();

  if (promoData.hideUntil && now < promoData.hideUntil) {
    promoElement.classList.remove('show', 'bell');
  } else {
    promoElement.classList.add('show');
  }

  closeBtn.addEventListener('click', function() {
    const hideUntil = now + 24 * 60 * 60 * 1000;
    localStorage.setItem('promoHideData', JSON.stringify({ hideUntil }));
    promoElement.classList.remove('show', 'bell');
  });
});

关键说明 #

• 用localStorage替代sessionStorage：它的存储会持久保存在浏览器中，直到手动清除或代码删除
• 存储过期时间戳：通过Date.now()获取当前时间，加上24小时的毫秒数，确保24小时后自动恢复显示
• 页面加载时先校验：每次打开页面都先检查存储的状态，确保跨页面跳转后状态一致

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