Django表单页面刷新时缓存表单数据方案咨询

一、利用Django表单类的初始值机制 #

如果你的表单基于Django的Form或ModelForm类，可通过后端session存储已输入数据，页面刷新时自动填充：

1. 视图中处理表单提交与session存储：

# views.py
from django.shortcuts import render
from .forms import YourForm

def your_view(request):
    form = YourForm()
    if request.method == 'POST':
        form = YourForm(request.POST)
        if form.is_valid():
            # 执行弹窗数据保存逻辑
            form.save()
            # 将当前表单输入存入session
            request.session['form_data'] = request.POST.dict()
            # AJAX提交返回JSON，普通提交可重定向或渲染页面
    # 页面刷新时从session读取数据初始化表单
    elif 'form_data' in request.session:
        form = YourForm(initial=request.session['form_data'])
    
    return render(request, 'your_template.html', {'form': form})

2. 模板中正常渲染表单，Django自动填充初始值：

<!-- your_template.html -->
<form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="button" id="modal-btn">打开弹窗</button>
    <button type="submit">保存主表单</button>
</form>

二、前端用LocalStorage实时保存输入 #

针对弹窗临时输入或不想依赖后端的场景，通过JS监听输入事件，将数据存在浏览器本地：

1. 编写JS逻辑处理数据存储与恢复：

// 页面加载时从LocalStorage读取数据填充表单
document.addEventListener('DOMContentLoaded', function() {
    const inputs = document.querySelectorAll('.persist-input');
    inputs.forEach(input => {
        const key = `form_${input.name}`;
        const savedValue = localStorage.getItem(key);
        if (savedValue) input.value = savedValue;
        
        // 实时监听输入并保存
        input.addEventListener('input', function() {
            localStorage.setItem(key, this.value);
        });
    });
});

// 弹窗提交成功后可清空对应字段的存储（可选）
function onModalSubmitSuccess(fieldName) {
    localStorage.removeItem(`form_${fieldName}`);
}

2. 给需要保留的表单字段添加类名：

<input type="text" name="username" class="persist-input">

三、弹窗提交用AJAX避免页面刷新 #

若弹窗提交触发页面刷新，本身会导致数据丢失，优先用AJAX处理弹窗请求：

1. 前端AJAX提交逻辑：

document.getElementById('modal-submit').addEventListener('click', function() {
    const modalData = {
        modal_field: document.getElementById('modal-field').value
    };
    fetch('/save-modal-data/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify(modalData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('modal').style.display = 'none';
        }
    });
});

2. 后端AJAX处理视图：

# views.py
import json
from django.http import JsonResponse
from .models import YourModel

def save_modal_data(request):
    if request.method == 'POST' and request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        data = json.loads(request.body)
        modal_field = data.get('modal_field')
        YourModel.objects.create(modal_field=modal_field)
        return JsonResponse({'success': True})
    return JsonResponse({'success': False}, status=400)

注意事项 #

• 使用session时需注意过期时间，避免数据长期留存；
• LocalStorage为浏览器本地存储，清除缓存会丢失数据，适合临时保存；
• 若表单包含文件上传，AJAX需用FormData对象，LocalStorage无法保存文件，建议结合后端session处理。

内容的提问来源于stack exchange，提问作者Furkan Yıldız