跨页面刷新保留表单状态：客户端数据持久化策略

<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.name }} </td> {# 假设user对象有name属性 #}
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" 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" 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" 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>

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form'); // 获取表单元素

    // 1. 页面加载时，从Local Storage恢复单选按钮状态
    function loadRadioStates() {
        const radioButtons = form.querySelectorAll('input[type="radio"]');
        radioButtons.forEach(radio => {
            const groupName = radio.name; // 单选按钮组的名称（此处为用户ID）
            const storedValue = localStorage.getItem(`radio_state_${groupName}`); // 使用一个前缀以避免键冲突

            if (storedValue && radio.value === storedValue) {
                radio.checked = true; // 如果当前单选按钮的值与存储的值匹配，则选中它
            }
        });
    }

    // 2. 监听单选按钮的change事件，保存状态到Local Storage
    function saveRadioState(event) {
        if (event.target.type === 'radio') {
            const groupName = event.target.name;
            const selectedValue = event.target.value;
            localStorage.setItem(`radio_state_${groupName}`, selectedValue);
        }
    }

    // 初始化：加载现有状态
    loadRadioStates();

    // 为整个表单添加一个事件监听器，利用事件委托来处理所有单选按钮的change事件
    form.addEventListener('change', saveRadioState);

    // 可选：如果需要在表单提交后清除存储的状态
    // form.addEventListener('submit', function() {
    //     const radioButtons = form.querySelectorAll('input[type="radio"]');
    //     const uniqueNames = new Set();
    //     radioButtons.forEach(radio => uniqueNames.add(radio.name));
    //     uniqueNames.forEach(name => localStorage.removeItem(`radio_state_${name}`));
    // });
});