前端表单数据持久化：如何在页面刷新后保留单选按钮选中状态

<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.username }} </td> {# 假设 user 对象有 username 属性 #}
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="user_{{ user.id }}" id="radio_aanwezig_{{ user.id }}" value="Aanwezig">
                            <label class="form-check-label" for="radio_aanwezig_{{ user.id }}">Aanwezig</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="user_{{ user.id }}" id="radio_afwezig_{{ user.id }}" value="Afwezig">
                            <label class="form-check-label" for="radio_afwezig_{{ user.id }}">Afwezig</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="user_{{ user.id }}" id="radio_geoorloofd_{{ user.id }}" value="Geoorloofd afwezig">
                            <label class="form-check-label" for="radio_geoorloofd_{{ user.id }}">Geoorloofd afwezig</label>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <input type="submit" value="Sla baksgewijs op" class="btn btn-primary active">
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const radioGroups = document.querySelectorAll('input[type="radio"]');

        // 恢复单选按钮状态
        radioGroups.forEach(radio => {
            const groupName = radio.name;
            const storedValue = localStorage.getItem(groupName);
            if (storedValue && radio.value === storedValue) {
                radio.checked = true;
            }
        });

        // 监听单选按钮变化并保存状态
        radioGroups.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.checked) {
                    localStorage.setItem(this.name, this.value);
                }
            });
        });
    });
</script>

document.addEventListener('DOMContentLoaded', function() {
    const radioGroups = document.querySelectorAll('input[type="radio"]');

    // 恢复单选按钮状态
    radioGroups.forEach(radio => {
        const groupName = radio.name;
        const storedValue = sessionStorage.getItem(groupName); // 使用 sessionStorage
        if (storedValue && radio.value === storedValue) {
            radio.checked = true;
        }
    });

    // 监听单选按钮变化并保存状态
    radioGroups.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                sessionStorage.setItem(this.name, this.value); // 使用 sessionStorage
            }
        });
    });
});

// 辅助函数：设置Cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 辅助函数：获取Cookie
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

document.addEventListener('DOMContentLoaded', function() {
    const radioGroups = document.querySelectorAll('input[type="radio"]');

    // 恢复单选按钮状态
    radioGroups.forEach(radio => {
        const groupName = radio.name;
        const storedValue = getCookie(groupName); // 使用 getCookie
        if (storedValue && radio.value === storedValue) {
            radio.checked = true;
        }
    });

    // 监听单选按钮变化并保存状态
    radioGroups.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                setCookie(this.name, this.value, 7); // 设置Cookie，保存7天
            }
        });
    });
});