如何添加Cookie实现表单提交后隐藏表单15分钟并记住jQuery状态？

兄弟，我太懂你用localStorage没法设过期的烦恼了——Cookie刚好能补上这个时间控制的缺口。下面给你一步步讲清楚代码该放哪，还有具体的实现逻辑：

核心思路 #

我们要完成两个关键动作：

• 页面加载时检查Cookie：如果存在标记表单已提交的Cookie，就隐藏表单；反之则正常显示。
• 表单提交成功时设置Cookie：给Cookie设15分钟的过期时间，同时立刻隐藏表单。

代码放置位置 #

所有相关代码都要放在jQuery的$(document).ready()函数内部，确保DOM完全加载后再执行，不然容易出现找不到表单元素的问题。你也可以把Cookie操作封装成独立函数，再在ready回调里调用，这样代码更整洁。

具体实现代码 #

$(document).ready(function() {
  // 读取Cookie的辅助函数
  function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
  }

  // 设置Cookie的辅助函数（支持分钟级过期）
  function setCookie(name, value, minutes) {
    let date = new Date();
    date.setTime(date.getTime() + (minutes * 60 * 1000));
    let expires = "expires=" + date.toUTCString();
    document.cookie = `${name}=${value};${expires};path=/`;
  }

  // 页面初始化：根据Cookie状态控制表单显示/隐藏
  let isFormHidden = getCookie("form_submitted");
  if (isFormHidden === "true") {
    $("#your-form-id").hide(); // 替换成你的表单实际选择器（ID/类名）
  } else {
    $("#your-form-id").show();
  }

  // 表单提交事件处理
  $("#your-form-id").submit(function(e) {
    e.preventDefault(); // 阻止默认提交行为，根据你的实际业务需求调整

    // 这里可以添加表单验证、AJAX提交后端等逻辑
    // ...

    // 提交成功后设置Cookie并隐藏表单
    setCookie("form_submitted", "true", 15); // 15分钟后Cookie自动失效
    $("#your-form-id").hide();
  });
});

关键细节提醒 #

• 一定要把#your-form-id替换成你项目里实际的表单选择器，比如类名.contact-form或者ID#user-feedback-form。
• 如果你的表单是AJAX异步提交的，记得把设置Cookie和隐藏表单的代码放在AJAX的success回调里，确保只有提交成功后才执行。
• path=/确保Cookie在整个网站范围内生效，如果你只想让Cookie在当前页面生效，可以删掉这个参数。
• 15分钟后Cookie会自动过期，下次用户刷新页面时，表单会自动重新显示，不需要额外写删除Cookie的代码。

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