如何用JS实现点击关闭div后设置cookie，同会话下该div不再显示

实现方案 #

你需要补充cookie的读写逻辑，页面初始化时判断cookie状态决定是否隐藏div，点击关闭时写入会话级cookie即可，以下是完整可运行的修正后代码：

HTML部分

<div class="bandeau">
  <a id="close">J'ai compris !</a>
</div>

JS部分

// 写入会话级cookie（不设置过期时间，浏览器关闭自动失效）
function setSessionCookie(name, value) {
  document.cookie = `${name}=${encodeURIComponent(value)}; path=/`;
}

// 读取指定cookie
function getCookie(name) {
  const nameMatch = `${name}=`;
  const cookieArr = document.cookie.split(';');
  for (let i = 0; i < cookieArr.length; i++) {
    const cookieItem = cookieArr[i].trim();
    if (cookieItem.indexOf(nameMatch) === 0) {
      return decodeURIComponent(cookieItem.substring(nameMatch.length));
    }
  }
  return null;
}

$(document).ready(function(){
  // 页面加载时判断是否已经关闭过提示条
  if (getCookie('bandeau_closed') === '1') {
    $('.bandeau').hide();
  }

  $('#close').click(function(){
    // 写入关闭标记的会话cookie
    setSessionCookie('bandeau_closed', '1');
    $(this).parent().hide();
    return false;
  });
});

说明 #

• 原生实现cookie操作无需引入额外插件，path=/配置保证全站路径下都能读取到该cookie
• 未设置expires过期参数，cookie为会话级别：同一会话内（浏览器未关闭）刷新、跳转页面都不会再次显示该div，关闭浏览器后cookie自动清除，下次打开会重新展示
• 已移除原HTML中冗余的onClick="cookie"属性，修正了原代码中script标签位置错误、括号顺序错乱的语法问题

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