利用Web存储API持久化表单选中状态（以单选按钮为例）

<form id="attendanceForm" 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">
                            {# 为每个用户的每个选项设置唯一的 name 属性，例如 'user_1', 'user_2' #}
                            {# id 属性也应是唯一的，以便与 label 关联 #}
                            <input class="form-check-input user-radio" type="radio" name="user_{{ user.id }}" id="radio_user_{{ user.id }}_aanwezig" value="Aanwezig">
                            <label class="form-check-label" for="radio_user_{{ user.id }}_aanwezig">
                                Aanwezig
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input user-radio" type="radio" name="user_{{ user.id }}" id="radio_user_{{ user.id }}_afwezig" value="Afwezig">
                            <label class="form-check-label" for="radio_user_{{ user.id }}_afwezig">
                                Afwezig
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input user-radio" type="radio" name="user_{{ user.id }}" id="radio_user_{{ user.id }}_geoorloofd" value="Geoorloofd afwezig">
                            <label class="form-check-label" for="radio_user_{{ 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() {
    // 1. 获取所有需要持久化的单选按钮
    const radioButtons = document.querySelectorAll('.user-radio');
    const form = document.getElementById('attendanceForm');

    /**
     * @function saveRadioState
     * @description 监听单选按钮的 'change' 事件，将选中状态保存到 Local Storage。
     *              存储键为单选按钮的 name 属性，值为其 value 属性。
     * @param {Event} event - change 事件对象
     */
    function saveRadioState(event) {
        const selectedRadio = event.target;
        if (selectedRadio.checked) {
            // 使用单选按钮组的 name 作为键，其选中的 value 作为值
            localStorage.setItem(selectedRadio.name, selectedRadio.value);
            console.log(`Saved: ${selectedRadio.name} = ${selectedRadio.value}`);
        }
    }

    /**
     * @function loadRadioState
     * @description 页面加载时，从 Local Storage 读取数据并恢复单选按钮的选中状态。
     */
    function loadRadioState() {
        radioButtons.forEach(radio => {
            const savedValue = localStorage.getItem(radio.name);
            // 如果 Local Storage 中有保存的值，并且当前单选按钮的值与保存的值匹配，则将其设为选中
            if (savedValue && radio.value === savedValue) {
                radio.checked = true;
                console.log(`Loaded: ${radio.name} = ${radio.value}`);
            }
        });
    }

    // 2. 为每个单选按钮添加 'change' 事件监听器，以便在用户选择时保存状态
    radioButtons.forEach(radio => {
        radio.addEventListener('change', saveRadioState);
    });

    // 3. 页面加载完成后，立即加载并应用之前保存的状态
    loadRadioState();

    // 4. (可选) 在表单成功提交后清除 Local Storage 中的临时状态
    //    这取决于你的业务逻辑：如果提交后数据已在服务器端持久化，
    //    则客户端的临时存储可以清除。
    if (form) {
        form.addEventListener('submit', function() {
            // 遍历所有单选按钮，清除其对应的 Local Storage 条目
            radioButtons.forEach(radio => {
                localStorage.removeItem(radio.name);
            });
            // 或者，如果你将所有状态存储在一个 JSON 对象中，则清除该对象
            // localStorage.removeItem('attendanceSelections');
            console.log("Local Storage cleared after form submission.");
        });
    }
});

// ... (与 Local Storage 示例相同的部分)

    function saveRadioState(event) {
        const selectedRadio = event.target;
        if (selectedRadio.checked) {
            sessionStorage.setItem(selectedRadio.name, selectedRadio.value); // 替换为 sessionStorage
            console.log(`Saved to Session Storage: ${selectedRadio.name} = ${selectedRadio.value}`);
        }
    }

    function loadRadioState() {
        radioButtons.forEach(radio => {
            const savedValue = sessionStorage.getItem(radio.name); // 替换为 sessionStorage
            if (savedValue && radio.value === savedValue) {
                radio.checked = true;
                console.log(`Loaded from Session Storage: ${radio.name} = ${radio.value}`);
            }
        });
    }

// ... (与 Local Storage 示例相同的部分)

document.cookie = `user_status_${radio.name}=${radio.value}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=/`; // 设置一天过期

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;
}
// 使用：getCookie(`user_status_${radio.name}`)