提交JavaScript后保留表单值

有时候，我们需要在提交表单后保留表单输入过的内容，以便用户再次编辑或查看。这个功能通常使用JavaScript实现。

方法一：使用localStorage

localStorage是HTML5提供的用于在客户端存储数据的机制。当用户提交表单时，我们可以将表单中的值保存在localStorage中。当用户访问表单页面时，我们可以从localStorage中读取值并填充表单字段。以下是示例代码：

//保存表单值
function saveFormValues() {
    var form = document.getElementById("myForm");
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        localStorage.setItem(elem.name, elem.value);
    }
}

//填充表单值
function loadFormValues() {
    var form = document.getElementById("myForm");
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        elem.value = localStorage.getItem(elem.name);
    }
}

//在提交表单时保存表单值
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
    saveFormValues();
});

//在页面加载时填充表单值
window.onload = function() {
    loadFormValues();
};

方法二：使用cookie

与localStorage类似，cookie也可以在客户端保存数据。我们可以在提交表单时将表单值保存在cookie中，然后在访问表单页面时从cookie中读取值并填充表单字段。以下是示例代码：

//保存表单值
function saveFormValues() {
    var form = document.getElementById("myForm");
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        document.cookie = elem.name + "=" + elem.value + ";path=/";
    }
}

//读取表单值
function getCookieValue(name) {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();
        if (cookie.indexOf(name + "=") == 0) {
            return cookie.substring(name.length + 1, cookie.length);
        }
    }
    return null;
}

//填充表单值
function loadFormValues() {
    var form = document.getElementById("myForm");
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        elem.value = getCookieValue(elem.name);
    }
}

//在提交表单时保存表单值
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
    saveFormValues();
});

//在页面加载时填充表单值
window.onload = function() {
    loadFormValues();
};

以上两种方法都可以实现提交JavaScript后保留表单值的功能。开发者可以根据需求灵活选择。