保存表单数据 jquery - Javascript (1)

📌 相关文章

📜 保存表单数据 jquery - Javascript (1)

📅 最后修改于: 2023-12-03 15:22:28.007000 🧑 作者: Mango

保存表单数据 jQuery - JavaScript

保存表单数据是Web开发中一项非常重要的功能，可以让用户在填写表单的过程中随时保存数据，防止因为突发事件(如浏览器崩溃)而丢失已填写的数据。

技术栈

本文将使用jQuery和JavaScript实现保存表单数据的功能。

Html页面与表单

先在html中编写基本页面和表单的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Save Form Data</title>
</head>
<body>
    <h1>Save Form Data</h1>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email"><br><br>
        <label for="age">Age:</label>
        <input type="number" id="age"><br><br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

实现保存表单数据

保存表单数据需要使用JavaScript的本地存储功能。我们可以使用localStorage对象将表单数据存储在浏览器的本地存储中。

具体实现步骤如下：

监听表单的submit事件
获取表单数据并将其保存到localStorage中
在下一次页面加载时，检查是否存在已保存的表单数据并恢复它们到表单中

$(document).ready(function () {
    //监听submit事件
    $("form").submit(function () {
        //获取表单数据
        var name = $("#name").val();
        var email = $("#email").val();
        var age = $("#age").val();

        //保存表单数据到本地存储
        localStorage.setItem("name", name);
        localStorage.setItem("email", email);
        localStorage.setItem("age", age);
    });

    //检查是否存在已保存的表单数据并恢复它们
    var name = localStorage.getItem("name");
    var email = localStorage.getItem("email");
    var age = localStorage.getItem("age");

    if (name != null) {
        $("#name").val(name);
    }

    if (email != null) {
        $("#email").val(email);
    }

    if (age != null) {
        $("#age").val(age);
    }
});

完整代码

以上是实现保存表单数据的完整JavaScript代码。将其放入<script>标签内并放置在html代码的底部。完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Save Form Data</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
<h1>Save Form Data</h1>
<form>
    <label for="name">Name:</label>
    <input type="text" id="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email"><br><br>
    <label for="age">Age:</label>
    <input type="number" id="age"><br><br>
    <button type="submit">Submit</button>
</form>

<script>
    $(document).ready(function () {
        //监听submit事件
        $("form").submit(function () {
            //获取表单数据
            var name = $("#name").val();
            var email = $("#email").val();
            var age = $("#age").val();

            //保存表单数据到本地存储
            localStorage.setItem("name", name);
            localStorage.setItem("email", email);
            localStorage.setItem("age", age);
        });

        //检查是否存在已保存的表单数据并恢复它们
        var name = localStorage.getItem("name");
        var email = localStorage.getItem("email");
        var age = localStorage.getItem("age");

        if (name != null) {
            $("#name").val(name);
        }

        if (email != null) {
            $("#email").val(email);
        }

        if (age != null) {
            $("#age").val(age);
        }
    });
</script>

</body>
</html>

总结

本文介绍了使用jQuery和JavaScript实现保存表单数据的方法。通过使用localStorage对象将表单数据存储在浏览器的本地存储中，可以帮助用户在填写表单的过程中随时保存数据，防止因为突发事件(如浏览器崩溃)而丢失已填写的数据。