如何用JavaScript创建每24小时仅显示一次的临时Cookie横幅？

首先不建议用IP区分用户——前端没办法直接获取用户IP，而且IP可能动态变化（比如手机切换网络），还可能多个用户共用同一个IP，根本没法准确识别单个用户。用浏览器的localStorage或者Cookie存储状态才是靠谱的方案，完全前端就能实现，适合新手。

方案一：用localStorage存储 #

localStorage会把数据存在浏览器里，除非用户手动清除，否则一直保留。我们可以记录上次显示横幅的时间，每次加载页面时判断是否超过24小时。

代码示例 #

假设你的横幅HTML已经写好：

<div id="cookieBanner" style="display: none;">
  这是我的Cookie横幅内容
  <button id="acceptBtn">同意</button>
</div>

添加JavaScript逻辑：

const cookieBanner = document.getElementById('cookieBanner');
const acceptBtn = document.getElementById('acceptBtn');
const STORAGE_KEY = 'lastBannerShownTime';
const ONE_DAY = 24 * 60 * 60 * 1000; // 24小时的毫秒数

// 页面加载时检查是否需要显示横幅
function checkBanner() {
  const lastShown = localStorage.getItem(STORAGE_KEY);
  const now = Date.now();
  
  // 没有记录，或者距离上次显示超过24小时，就显示横幅
  if (!lastShown || now - parseInt(lastShown) > ONE_DAY) {
    cookieBanner.style.display = 'block';
  } else {
    cookieBanner.style.display = 'none';
  }
}

// 用户点击同意时，记录当前时间
acceptBtn.addEventListener('click', () => {
  localStorage.setItem(STORAGE_KEY, Date.now().toString());
  cookieBanner.style.display = 'none';
});

// 页面加载完成后执行检查
window.addEventListener('load', checkBanner);

方案二：用Cookie存储（更贴合场景） #

既然是Cookie横幅，直接用浏览器Cookie来存储状态更合理，还能直接设置过期时间，不用自己计算时长。

代码示例 #

同样基于你的横幅HTML，JavaScript逻辑如下：

const cookieBanner = document.getElementById('cookieBanner');
const acceptBtn = document.getElementById('acceptBtn');
const COOKIE_NAME = 'cookieBannerAccepted';

// 获取指定名称的Cookie值
function getCookie(name) {
  const cookieStr = `; ${document.cookie}`;
  const cookieParts = cookieStr.split(`; ${name}=`);
  if (cookieParts.length === 2) return cookieParts.pop().split(';').shift();
}

// 设置Cookie，指定过期天数
function setCookie(name, value, days) {
  const expireDate = new Date();
  expireDate.setTime(expireDate.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = `expires=${expireDate.toUTCString()}`;
  // path=/ 确保全站都能读取这个Cookie
  document.cookie = `${name}=${value}; ${expires}; path=/`;
}

// 检查是否需要显示横幅
function checkBanner() {
  const hasAccepted = getCookie(COOKIE_NAME);
  if (!hasAccepted) {
    cookieBanner.style.display = 'block';
  } else {
    cookieBanner.style.display = 'none';
  }
}

// 用户点击同意时，设置24小时后过期的Cookie
acceptBtn.addEventListener('click', () => {
  setCookie(COOKIE_NAME, 'yes', 1); // 1天后过期
  cookieBanner.style.display = 'none';
});

// 页面加载时检查
window.addEventListener('load', checkBanner);

注意事项 #

• localStorage是持久化存储，用户不清除浏览器数据就会一直保留；Cookie设置了过期时间后，到点会自动失效
• 两种方案都不需要后端支持，纯前端就能完成，适合你的需求
• 不要纠结IP的问题，前端拿不到准确的用户IP，而且用IP区分用户完全不靠谱

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