用JavaScript实现表单回填功能

在网页开发中，表单回填功能能够极大地提升用户体验。当用户因各种原因中断表单填写，再次进入时，若能自动回填之前输入的内容，无疑会节省时间与精力。JavaScript作为网页开发的强大脚本语言，为实现这一功能提供了便利的方法。

我们需要获取表单元素。使用document.getElementById()或document.querySelector()方法可以精准定位到目标表单。例如，若表单的id为“myForm”，可以通过const form = document.getElementById('myForm');来获取该表单对象。

接下来，处理表单数据的存储。一种常见的方式是利用浏览器的本地存储（Local Storage）。当用户在表单中输入内容时，通过监听表单元素的input事件，将输入的值存储到本地存储中。以一个文本框为例，代码如下：

const inputElement = document.getElementById('myInput');
inputElement.addEventListener('input', function() {
    localStorage.setItem('myInputValue', this.value);
});

上述代码监听了id为“myInput”的文本框的输入事件，每当用户输入新内容，都会将当前值存储到本地存储中，键名为“myInputValue”。

而回填数据则在页面加载时进行。在页面加载完成后，从本地存储中读取之前存储的数据，并将其设置回相应的表单元素中。代码示例如下：

window.addEventListener('load', function() {
    const inputValue = localStorage.getItem('myInputValue');
    if (inputValue) {
        const inputElement = document.getElementById('myInput');
        inputElement.value = inputValue;
    }
});

这段代码在页面加载完成后，尝试从本地存储中读取“myInputValue”的值。若存在该值，则将其设置到对应的文本框中。

对于复杂表单，包含多个输入元素的情况，我们可以遍历表单元素，统一进行数据存储与回填。例如：

const form = document.getElementById('myForm');
form.addEventListener('input', function(event) {
    const inputName = event.target.name;
    const inputValue = event.target.value;
    localStorage.setItem(inputName, inputValue);
});

window.addEventListener('load', function() {
    const formElements = form.elements;
    for (let i = 0; i < formElements.length; i++) {
        const element = formElements[i];
        const storedValue = localStorage.getItem(element.name);
        if (storedValue) {
            element.value = storedValue;
        }
    }
});

通过以上步骤，我们便成功地使用JavaScript实现了表单回填功能，为用户带来更加流畅便捷的表单填写体验。