如何修复JS代码实现Bootstrap Alert按钮点击后Cookie提示框不再显示

首先得说，你现有的JS代码语法完全混乱了，括号不匹配不说，逻辑方向也不对——点击接受按钮根本不需要刷新页面，核心应该是隐藏提示框+记住用户的选择，这样下次打开网站就不会再弹出了。

我给你整理一套完整的可运行解决方案：

1. 先修正HTML结构（确保元素可被正确选中） #

把你的提示框HTML补全并调整，保证类名和ID清晰：

<div id="cookie-alert" class="pb-element-alert alert alert-info fixed-bottom text-center mb-0">
  <p>Este sitio web emplea cookies para ofrecerle un servicio más personalizado.</p>
  <button type="button" class="btn btn-primary btn_cerrar">接受</button>
</div>

2. 编写正确的JavaScript代码 #

我们用浏览器的localStorage来存储用户已接受Cookie的状态，这样即使刷新页面、重启浏览器，也能记住用户的选择：

$(document).ready(function() {
  // 页面加载时，先检查用户是否已经接受过Cookie
  const hasAccepted = localStorage.getItem('acceptedCookies');
  if (hasAccepted) {
    $('#cookie-alert').hide();
  }

  // 绑定「接受」按钮的点击事件
  $(".btn_cerrar").on('click', function() {
    // 用平滑动画隐藏提示框（体验比直接hide更好）
    $('#cookie-alert').fadeOut();
    // 把用户的接受状态存入本地存储
    localStorage.setItem('acceptedCookies', 'true');
  });
});

关键逻辑解释 #

• $(document).ready()：确保页面DOM完全加载后再执行代码，避免出现找不到元素的情况
• localStorage.getItem('acceptedCookies')：读取本地存储的状态，如果存在（说明用户之前点过接受），直接隐藏提示框
• fadeOut()：用渐隐动画隐藏提示框，提升用户体验
• localStorage.setItem('acceptedCookies', 'true')：把用户的选择永久存在浏览器中，除非用户主动清理缓存，否则不会消失

如果你的提示框是Bootstrap模态框（Modal），只需要把$('#cookie-alert').fadeOut()改成$('#cookie-alert').modal('hide')，适配Bootstrap模态框的官方API即可。

内容的提问来源于stack exchange，提问作者Jorge Eliecer Muñoz Herrera