如何让Django页面中的单选框刷新后保留选中值？

问题背景 #

开发考勤管理系统，通过单选框为每位用户选择出勤状态（Present/Aanwezig、Absent/Afwezig、Allowed Absent/Geoorloofd afwezig），希望页面刷新时未保存的单选框选择不会丢失，无JavaScript开发经验，需要适配Django模板的实现方案。

解决方案步骤 #

1. 修正Django模板的DOM问题 #

首先修复模板里的两处错误：

• 所有单选框的id不能重复，需要为每个用户的每个单选框生成唯一ID
• label的for属性必须对应单选框的id，否则点击标签无法选中单选框

修改后的模板代码：

<form action="{% url 'create_attendance' baksgewijs.id peloton.id %}" method="post">
    {% csrf_token %}
    <div class="table-responsive fixed-length">
            <table id = "userTable">
                    <tbody>
                    {% for user in users %}
                            <tr>
                                    <td> {{ user }}
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input attendance-radio" type="radio" name="{{user.id}}" id="radio-{{user.id}}-aanwezig" value="Aanwezig">
                                            <label class="form-check-label" for="radio-{{user.id}}-aanwezig">
                                                Aanwezig
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input attendance-radio" type="radio" name="{{user.id}}" id="radio-{{user.id}}-afwezig" value="Afwezig">
                                            <label class="form-check-label" for="radio-{{user.id}}-afwezig">
                                                Afwezig
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input attendance-radio" type="radio" name="{{user.id}}" id="radio-{{user.id}}-geoorloofd" value="Geoorloofd afwezig">
                                            <label class="form-check-label" for="radio-{{user.id}}-geoorloofd">
                                               Geoorloofd afwezig
                                            </label>
                                        </div>
                                    </td>
                            </tr>
                    {% endfor %}
                    </tbody>
            </table>
    </div>
    <input type="submit" value="Sla baksgewijs op" class="btn btn-primary active">
</form>

这里做了三个关键修改：

• 给所有单选框加统一类名attendance-radio，方便JS批量选择元素
• 每个单选框的id改为radio-{{user.id}}-状态标识，确保全局唯一
• label的for属性对应到正确的单选框ID，修复标签点击失效问题

2. 添加JavaScript实现状态暂存与恢复 #

在模板的</form>标签之后添加以下脚本，实现两个核心功能：

• 单选框变化时，将选中状态保存到浏览器本地存储localStorage
• 页面加载完成时，从localStorage读取状态并恢复单选框选中状态

<script>
// 页面加载完成后恢复之前保存的状态
document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('.attendance-radio');
    
    radioButtons.forEach(radio => {
        const userId = radio.name;
        const savedStatus = localStorage.getItem(`attendance_${userId}`);
        
        if (savedStatus && radio.value === savedStatus) {
            radio.checked = true;
        }
    });
});

// 监听单选框变化，实时保存状态到localStorage
document.addEventListener('change', function(e) {
    const target = e.target;
    if (target.classList.contains('attendance-radio')) {
        const userId = target.name;
        localStorage.setItem(`attendance_${userId}`, target.value);
    }
});

// 可选：点击保存按钮后清空本地暂存数据，避免下次加载显示旧状态
document.querySelector('input[type="submit"]').addEventListener('click', function() {
    const userIds = [{% for user in users %}'{{user.id}}',{% endfor %}];
    userIds.forEach(id => {
        localStorage.removeItem(`attendance_${id}`);
    });
});
</script>

代码说明 #

• localStorage：浏览器提供的本地存储API，数据会永久保存在当前浏览器中（除非手动清除或代码删除），适合暂存未提交的表单数据
• DOMContentLoaded事件：页面DOM结构加载完成后触发，此时恢复之前保存的单选框状态
• change事件监听：单选框选中状态变化时，立即将该用户的出勤状态保存到localStorage，用attendance_用户ID作为键名避免冲突
• 保存按钮事件：表单提交成功后清空对应本地存储数据，防止下次打开页面时显示已提交的旧状态

注意事项 #

• localStorage存储的是字符串，这里直接保存单选框的value值即可
• 若用户更换浏览器或清除浏览器缓存，暂存的数据会丢失，这是本地存储的固有特性
• 模板中user.id必须是唯一的用户标识，否则会出现不同用户状态互相覆盖的问题

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