页面刷新保留表单数据的技巧分享

## 页面刷新表单数据不丢失？前端Web存储API实战教程 还在为页面刷新导致表单数据丢失而烦恼吗？本文提供一套完整的前端解决方案，教你如何利用Web存储API（Local Storage、Session Storage和Cookies）实现表单数据持久化，即使刷新页面，单选按钮等表单输入也能完美保留。教程将深入浅出地讲解每种存储机制的特点、适用场景以及详细的JavaScript实现方法，并附带示例代码，助你轻松构建用户体验更佳的Web应用。告别数据丢失，提升用户满意度，从掌握Web存储API开始！了解Local Storage、Session Storage和Cookies的区别，选择最适合你的存储方案，打造更友好的用户交互体验。

在构建交互式Web应用时，用户体验至关重要。一个常见的问题是，当用户在填写表单但尚未提交时，如果意外刷新页面，所有输入的数据都会丢失。这对于包含大量选择项（如单选按钮组）的表单尤其令人沮丧。为了解决这一问题，我们可以利用客户端存储技术，在浏览器端持久化用户的选择，从而在页面刷新后恢复表单状态。

核心概念：Web存储机制

现代浏览器提供了多种客户端存储机制，允许Web应用程序在用户浏览器中存储数据。这些机制各有特点，适用于不同的场景：

1. Local Storage (本地存储)：
   • 数据没有过期时间，除非手动删除，否则会一直存在。
   • 存储容量较大（通常为5-10MB）。
   • 数据存储在浏览器中，与特定域名绑定。
   • 适用于长期存储用户偏好、离线数据等。
2. Session Storage (会话存储)：
   • 数据在当前浏览器会话结束时（即关闭浏览器标签页或窗口时）被清除。
   • 存储容量与Local Storage类似。
   • 数据存储在浏览器中，与特定标签页绑定。
   • 适用于临时存储会话相关数据，如表单草稿、购物车内容等。
3. Cookies (曲奇)：
   • 数据可以设置过期时间，也可以是会话级的。
   • 存储容量较小（通常为4KB）。
   • 每次HTTP请求都会自动发送到服务器，可能增加网络流量。
   • 适用于存储用户身份认证信息、个性化设置等，通常由服务器设置和读取。

实现方案一：使用 Local Storage 进行持久化

Local Storage是实现跨页面刷新保留表单状态的理想选择，因为它没有过期时间。

实现步骤：

1. 监听表单元素变化：当用户选择单选按钮时，通过JavaScript监听其change事件。
2. 存储数据：在change事件触发时，将选中的单选按钮的name属性作为键，value属性作为值，存储到localStorage中。
3. 恢复数据：页面加载时，检查localStorage中是否有之前存储的值。如果有，则找到对应的单选按钮并将其设置为选中状态。

示例代码：

假设HTML结构如下，其中name属性是动态生成的，用于标识不同的用户选择组：

<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">
                            &lt;input class=&quot;form-check-input user-radio&quot; type=&quot;radio&quot; name=&quot;{{ user.id }}&quot; id=&quot;radio-{{ user.id }}-aanwezig&quot; value=&quot;Aanwezig&quot;&gt;
                            <label class="form-check-label" for="radio-{{ user.id }}-aanwezig">Aanwezig</label>
                        </div>
                        <div class="form-check">
                            &lt;input class=&quot;form-check-input user-radio&quot; type=&quot;radio&quot; name=&quot;{{ user.id }}&quot; id=&quot;radio-{{ user.id }}-afwezig&quot; value=&quot;Afwezig&quot;&gt;
                            <label class="form-check-label" for="radio-{{ user.id }}-afwezig">Afwezig</label>
                        </div>
                        <div class="form-check">
                            &lt;input class=&quot;form-check-input user-radio&quot; type=&quot;radio&quot; name=&quot;{{ user.id }}&quot; id=&quot;radio-{{ user.id }}-geoorloofd&quot; value=&quot;Geoorloofd afwezig&quot;&gt;
                            <label class="form-check-label" for="radio-{{ user.id }}-geoorloofd">Geoorloofd afwezig</label>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    &lt;input type=&quot;submit&quot; value=&quot;Sla baksgewijs op&quot; class=&quot;btn btn-primary active&quot;&gt;
</form>

JavaScript 代码：

document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('.user-radio'); // 选取所有带有特定class的单选按钮

    // 1. 恢复数据：页面加载时，从Local Storage中恢复之前的选择
    radioButtons.forEach(radio => {
        const storedValue = localStorage.getItem(radio.name);
        if (storedValue && radio.value === storedValue) {
            radio.checked = true;
        }
    });

    // 2. 存储数据：监听单选按钮的change事件
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem(this.name, this.value);
            }
        });
    });

    // 可选：在表单提交成功后清除相关数据
    const form = document.getElementById('attendanceForm');
    if (form) {
        form.addEventListener('submit', function() {
            // 假设表单提交成功后不再需要这些本地存储的数据
            radioButtons.forEach(radio => {
                localStorage.removeItem(radio.name);
            });
            // 或者更精细地处理，例如只清除当前表单相关的数据
            // 例如：localStorage.clear(); // 清除所有本地存储，慎用
        });
    }
});

注意事项：

• 唯一ID：在HTML中，id属性必须是唯一的。原问题中的id="radio"对于多个单选按钮是无效的。在示例中，我已将id修改为id="radio-{{ user.id }}-aanwezig"等形式以确保唯一性。
• 数据类型：localStorage和sessionStorage都只能存储字符串。如果需要存储对象或数组，需要使用JSON.stringify()进行序列化，并在读取时使用JSON.parse()进行反序列化。
• 清除数据：当表单成功提交后，通常应该清除相关的本地存储数据，以避免下次访问时出现不一致的状态。

实现方案二：使用 Session Storage 进行会话级持久化

Session Storage的用法与Local Storage非常相似，主要区别在于数据的生命周期。它只在当前浏览器标签页或窗口打开期间有效，关闭后数据即被清除。

示例代码：

只需将上述JavaScript代码中的localStorage替换为sessionStorage即可：

document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('.user-radio');

    // 1. 恢复数据：从Session Storage中恢复之前的选择
    radioButtons.forEach(radio => {
        const storedValue = sessionStorage.getItem(radio.name); // 区别在这里
        if (storedValue && radio.value === storedValue) {
            radio.checked = true;
        }
    });

    // 2. 存储数据：监听单选按钮的change事件
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                sessionStorage.setItem(this.name, this.value); // 区别在这里
            }
        });
    });

    // 可选：在表单提交成功后清除相关数据
    const form = document.getElementById('attendanceForm');
    if (form) {
        form.addEventListener('submit', function() {
            radioButtons.forEach(radio => {
                sessionStorage.removeItem(radio.name); // 区别在这里
            });
        });
    }
});

适用场景：

当数据仅需要在用户当前浏览会话中保持，例如用户在填写一个多步骤表单，但中途需要刷新页面，或者在不同标签页之间切换（如果需要跨标签页则不适用Session Storage），Session Storage是更好的选择。

实现方案三：使用 Cookies 进行灵活持久化

Cookies可以设置过期时间，使其既可以像Local Storage一样长期存在，也可以像Session Storage一样在会话结束后消失。然而，由于其存储容量小且每次请求都会发送到服务器，通常不建议用于存储大量前端状态数据。对于少量、需要服务器感知的状态（如用户登录令牌），Cookies更为合适。

示例代码（简要）：

由于Cookies的API相对复杂，这里提供一个简化的设置和获取函数示例。在实际应用中，通常会使用库（如js-cookie）来简化操作。

// 辅助函数：设置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 radioButtons = document.querySelectorAll('.user-radio');

    // 1. 恢复数据：从Cookies中恢复之前的选择
    radioButtons.forEach(radio => {
        const storedValue = getCookie(radio.name);
        if (storedValue && radio.value === storedValue) {
            radio.checked = true;
        }
    });

    // 2. 存储数据：监听单选按钮的change事件
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                setCookie(this.name, this.value, 7); // 存储7天
            }
        });
    });

    // ... 表单提交后清除Cookies的逻辑类似，使用setCookie(name, "", -1)
});

注意事项：

• 容量限制：Cookies的容量非常小，不适合存储大量数据。
• 性能影响：每次HTTP请求都会携带Cookie数据，可能增加网络负载。
• 安全性：对于敏感数据，应考虑HttpOnly和Secure等属性，但这通常需要在服务器端设置。

总结

在页面刷新后保留表单输入状态是提升用户体验的关键一环。通过利用Local Storage、Session Storage或Cookies，开发者可以根据数据的生命周期和存储需求，选择最合适的客户端存储方案。对于需要长期保留且不需频繁与服务器交互的表单状态，Local Storage是首选；对于会话级临时数据，Session Storage更为合适；而Cookies则更适用于需要服务器感知的少量状态数据。在实际开发中，结合具体业务场景和数据特性，合理选择并实现数据持久化，将显著提升Web应用的健壮性和用户满意度。

好了，本文到此结束，带大家了解了《页面刷新保留表单数据的技巧分享》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！