JS中if语句未按预期控制cookieOk变量导致Cookie横幅自动消失问题

代码问题排查 #

• 条件判断语法错误：if (cookieOk = true) 这里用了单等号=，属于赋值操作而非相等判断，代码执行到这行时会强制给cookieOk赋值为true，条件永远成立，所以页面刚加载就会直接删除横幅。正确的相等判断需要用双等号==或者全等号===。
• 变量作用域错误：你在disappearObject1函数内部用var声明的cookieOk是局部变量，函数外部的if判断根本访问不到这个变量，要实现全局生效的状态需要在函数外部声明变量。
• 缺少持久化存储：当前的cookieOk仅存在页面运行内存里，刷新页面或者跳转站点其他页面就会重置，没法实现全站所有页面生效的需求，需要把状态存到浏览器本地存储中。

修复后的代码 #

JS部分替换为以下代码即可，原有HTML、CSS无需修改：

// 页面加载时先从浏览器本地存储读取之前的同意状态，默认未同意为false
let cookieOk = localStorage.getItem('cookieOk') === 'true' ? true : false;

// 页面加载完成后判断，如果已经同意过Cookie，直接移除横幅
window.addEventListener('load', function() {
  if (cookieOk) {
    const banner = document.getElementById('cookie-banner');
    if (banner) banner.remove();
  }
})

// 点击OK按钮触发的逻辑
function disappearObject1() {
  const remove = document.getElementById("cookie-banner");
  remove.remove();
  // 把同意状态存入本地存储，同一站点下所有页面都能读取到，刷新也不会丢失
  localStorage.setItem('cookieOk', 'true');
}

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