如何将Django分页表单的用户输入保存到LocalStorage？

Got it，咱们一步步来搞定把分页表单的用户输入存到LocalStorage这件事。首先得明确：你拿到的fields是后端的BoundField对象，前端没法直接用，得先把它们转换成能定位到DOM输入框的标识（比如字段的name属性）——如果还没做这一步，在Django模板里可以这么生成前端能用的字段列表：

var fields = [{% for field in form %}"{{ field.name }}",{% endfor %}];

接下来分三个核心步骤实现功能：

1. 实时监听输入，保存到LocalStorage #

为了避免不同分页的字段值互相覆盖，咱们给LocalStorage的键加上当前页码作为前缀。绑定input/change事件，用户每输入一点内容就自动保存：

// 先从Django模板传入当前页码：var currentPage = {{ page_obj.number }};
$(document).ready(function() {
    fields.forEach(function(fieldName) {
        var $input = $('[name="' + fieldName + '"]');
        // 监听输入/选择事件
        $input.on('input change', function() {
            var storageKey = `form_page_${currentPage}_${fieldName}`;
            // 针对复选框/单选框做特殊处理
            var fieldValue = $(this).is(':checkbox, :radio') ? $(this).prop('checked') : $(this).val();
            localStorage.setItem(storageKey, fieldValue);
        });
    });
});

2. 页面加载时，自动恢复之前的输入 #

当用户切换分页再返回时，把LocalStorage里保存的值自动填回对应的输入框：

$(document).ready(function() {
    // 先恢复历史输入
    fields.forEach(function(fieldName) {
        var storageKey = `form_page_${currentPage}_${fieldName}`;
        var savedValue = localStorage.getItem(storageKey);
        if (savedValue !== null) {
            var $input = $('[name="' + fieldName + '"]');
            if ($input.is(':checkbox, :radio')) {
                $input.prop('checked', savedValue === 'true');
            } else {
                $input.val(savedValue);
            }
        }
    });

    // 再绑定实时保存事件（上面的代码）
    // ... 这里放入第一步的监听代码
});

3. 表单提交后清理存储（可选） #

如果用户提交了整个表单，建议清空对应分页的LocalStorage数据，避免下次加载时显示旧内容：

// 假设你的表单id是"paginated-form"
$('#paginated-form').on('submit', function() {
    // 清空当前分页的存储
    fields.forEach(function(fieldName) {
        var storageKey = `form_page_${currentPage}_${fieldName}`;
        localStorage.removeItem(storageKey);
    });
    // 如果要清空所有分页的历史数据，可以用前缀匹配删除
    // Object.keys(localStorage).forEach(key => {
    //     if (key.startsWith('form_page_')) localStorage.removeItem(key);
    // });
});

小提醒 #

• LocalStorage只能存字符串，要是有复杂数据（比如多选框的数组值），记得用JSON.stringify()和JSON.parse()处理。
• 如果你的表单有文件上传字段，LocalStorage没法存文件内容，这种字段可以跳过存储逻辑。

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