如何在Django中判断session过期及表单重填场景实现问询

你的这个方案思路非常务实，完全能解决用户填写表单时session过期导致数据丢失的痛点，我来给你细化下具体的实现步骤和需要注意的细节，让落地更顺畅：

1. 表单提交前的Session校验（AJAX方式） #

• 给表单绑定提交事件的前置拦截逻辑，先阻止默认的表单提交行为
• 发送一个HEAD请求到后端的session校验接口（比如/api/check-session），用HEAD请求的好处是只返回状态码，不用传输响应体，效率更高
  • 如果后端返回200 OK，说明session有效，直接触发表单的正常提交流程
  • 如果返回401 Unauthorized，说明session已过期，进入表单数据暂存环节

2. 将表单数据存入Cookie #

• 当检测到session过期时，用JavaScript快速获取表单所有字段的值，推荐用FormData对象简化操作：

  const form = document.getElementById('target-form');
  const formData = new FormData(form);
  // 转换为普通对象方便后续序列化
  const formDataObj = Object.fromEntries(formData.entries());
  

• 把表单数据序列化为JSON字符串，存入Cookie时要注意几个关键点：
  • 用encodeURIComponent转义JSON字符串，避免特殊字符破坏Cookie格式
  • 设置合理的过期时间（比如1小时，足够用户完成登录流程）
  • 指定Cookie的路径，确保和表单页面同路径，方便后续读取

  const formDataStr = JSON.stringify(formDataObj);
  // 设置Cookie，1小时后过期，路径为表单所在路径
  document.cookie = `saved_form_data=${encodeURIComponent(formDataStr)}; expires=${new Date(Date.now() + 3600000).toUTCString()}; path=/form-page; SameSite=Lax`;
  

3. 登录完成后跳转回表单页面 #

• 在跳转登录页面时，把表单页面的URL作为参数传递给登录页（比如/login?redirect=/form-page）
• 后端处理登录请求成功后，直接重定向到redirect参数指定的表单页面即可

4. 表单页面加载时读取Cookie填充数据 #

• 在表单页面的DOMContentLoaded事件中，读取Cookie并填充表单：

  document.addEventListener('DOMContentLoaded', function() {
    // 从Cookie中提取保存的表单数据
    const cookies = document.cookie.split(';').map(c => c.trim());
    const savedDataCookie = cookies.find(c => c.startsWith('saved_form_data='));
    
    if (savedDataCookie) {
      const formDataStr = decodeURIComponent(savedDataCookie.split('=')[1]);
      const formDataObj = JSON.parse(formDataStr);
      const form = document.getElementById('target-form');
      
      // 遍历字段，根据控件类型填充对应值
      for (const [key, value] of Object.entries(formDataObj)) {
        const field = form.querySelector(`[name="${key}"]`);
        if (!field) continue;
        
        switch(field.type) {
          case 'checkbox':
            field.checked = value === 'on' || value === true;
            break;
          case 'radio':
            const radioOption = form.querySelector(`[name="${key}"][value="${value}"]`);
            if (radioOption) radioOption.checked = true;
            break;
          case 'select-one':
            field.value = value;
            break;
          default:
            field.value = value;
            break;
        }
      }
      
      // 填充完成后删除Cookie，避免重复填充
      document.cookie = `saved_form_data=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/form-page;`;
    }
  });
  

• 这里要注意区分不同表单控件的赋值逻辑，比如复选框、单选框和下拉选择框的处理方式和普通输入框不一样，需要单独适配
• 填充完成后一定要删除Cookie，避免用户下次打开表单时自动填充旧数据

5. 关键注意事项 #

• Cookie大小限制：单个Cookie的值最大不能超过4KB，如果你的表单包含大段文本或多个字段，可能会超出限制。这种情况可以替换为sessionStorage（同一个浏览器会话内有效），或者后端临时存储（比如存Redis，前端Cookie只存一个唯一标识，登录后根据标识取数据）
• 敏感数据处理：如果表单包含敏感信息（如密码、身份证号），绝对不要存在Cookie里，建议用后端临时存储方案，避免数据泄露风险
• 后端二次校验：即使前端做了session前置校验，后端在处理表单提交时也要再次校验session有效性，防止前端校验被绕过
• 兼容性：FormData和Object.fromEntries在现代浏览器都支持，如果需要兼容旧浏览器，可以手动遍历表单字段获取值，或者引入polyfill

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