如何实现Bootstrap 4 Cookie弹窗关闭后不再显示？

没问题！要让用户关闭Cookie弹窗后，下次访问网站时不再看到它，核心思路是用浏览器的localStorage来记录用户的操作状态——它会把数据持久化存在用户的浏览器中，除非用户手动清除浏览器数据，否则状态会一直保留。

先帮你修正原代码里的小问题，再添加持久化逻辑：

第一步：修改JavaScript代码（添加localStorage逻辑） #

原代码里的选择器$("alert")是错误的（它会尝试选择<alert>标签），我们需要改成精准选中你的弹窗元素，同时加入localStorage的判断和存储逻辑：

$(document).ready(function() {
  // 页面加载时，检查用户是否已经关闭过弹窗
  const hasClosedAlert = localStorage.getItem('closedCookieNotification');
  
  // 如果有记录说明已关闭，直接隐藏弹窗
  if (hasClosedAlert === 'true') {
    $('.cookies-notification').hide();
  }

  // 点击关闭按钮时的处理
  $("button.close").click(function() {
    // 隐藏弹窗
    $('.cookies-notification').hide();
    // 把"已关闭"的状态存入localStorage
    localStorage.setItem('closedCookieNotification', 'true');
  });
});

第二步：HTML代码（可保留原结构，无需大改） #

你的HTML结构没问题，只需要确保弹窗的类名cookies-notification和JS里的选择器对应上就行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-dismissible alert-danger cookies-notification" role="alert" style="margin-top: 20px;">
  <div class="container">
    <button type="button" class="close">
      <span aria-hidden="true">×</span>
      <span class="sr-only">Close</span>
    </button>
    <p style="font-size: 13px;">Ta strona korzysta z cookies. Korzystając z tej strony zgadzasz się na korzystanie z cookies zgodnie z ustawieniami twojej przeglądarki.</p>
  </div>
</div>

额外优化：让弹窗定期重新显示（可选） #

如果希望弹窗在一段时间后（比如30天）再次显示给用户，可以改用存储过期时间戳的方式，而不是永久记录：

$(document).ready(function() {
  const alertExpiry = localStorage.getItem('cookieAlertExpiry');
  const currentTime = new Date().getTime();
  // 设置30天的有效期（单位：毫秒）
  const expiryDuration = 30 * 24 * 60 * 60 * 1000;

  // 检查是否已过期，或从未关闭过弹窗
  if (!alertExpiry || currentTime > parseInt(alertExpiry)) {
    $('.cookies-notification').show();
  } else {
    $('.cookies-notification').hide();
  }

  $("button.close").click(function() {
    $('.cookies-notification').hide();
    // 存储当前时间+有效期的时间戳
    localStorage.setItem('cookieAlertExpiry', (currentTime + expiryDuration).toString());
  });
});

原理说明 #

• localStorage是浏览器提供的本地存储API，存储的数据在页面刷新、浏览器重启后依然保留。
• 我们通过getItem读取状态，判断是否要隐藏弹窗；通过setItem写入用户关闭弹窗的操作记录。
• 选择器$('.cookies-notification')确保我们精准操作目标弹窗，避免影响页面上其他alert组件。

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