如何在不使用服务器端脚本的情况下实现页面间表单数据传递

没问题！既然没法用服务器端脚本，咱们完全可以靠前端技术搞定页面间的表单数据传递，我给你整理了几个实用的方案，附完整代码示例：

这是最直接的方法，把表单提交方式改成GET，数据会自动拼在URL里，页面2只需要解析URL参数就能拿到数据。

页面1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <!-- 把action改成你的页面2文件名，比如page2.html -->
    <form action="page2.html" method="get">
        <input type="text" name="name" placeholder="输入姓名">
        <input type="email" name="email" placeholder="输入邮箱">
        <button type="submit">提交</button>
    </form>
</body>
</html>

页面2代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面2</title>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="姓名">
        <input type="email" id="email" placeholder="邮箱">
    </form>

    <script>
        // 解析URL参数的工具函数
        function getUrlParam(paramName) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(paramName);
        }

        // 给表单赋值
        document.getElementById('name').value = getUrlParam('name') || '';
        document.getElementById('email').value = getUrlParam('email') || '';
    </script>
</body>
</html>

注意：这个方法优点是简单易实现，但数据会暴露在URL中，不适合传递敏感信息，且URL有长度限制。

把表单数据存在浏览器本地存储里，页面2读取后再清空，适合需要传递较多数据或不想暴露在URL的场景。

页面1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <form id="form1">
        <input type="text" name="name" placeholder="输入姓名">
        <input type="email" name="email" placeholder="输入邮箱">
        <button type="submit">提交</button>
    </form>

    <script>
        $('#form1').submit(function(e) {
            e.preventDefault(); // 阻止默认表单提交行为
            
            // 收集表单数据
            const formData = {
                name: $('input[name="name"]').val(),
                email: $('input[name="email"]').val()
            };

            // 存到localStorage（用sessionStorage的话，浏览器关闭后数据会自动清空）
            localStorage.setItem('formData', JSON.stringify(formData));
            
            // 跳转到页面2
            window.location.href = 'page2.html';
        });
    </script>
</body>
</html>

页面2代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面2</title>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="姓名">
        <input type="email" id="email" placeholder="邮箱">
    </form>

    <script>
        // 读取本地存储的数据
        const formData = JSON.parse(localStorage.getItem('formData')) || {};
        
        // 给表单赋值
        document.getElementById('name').value = formData.name || '';
        document.getElementById('email').value = formData.email || '';

        // 用完及时清空，避免数据残留
        localStorage.removeItem('formData');
    </script>
</body>
</html>

注意：localStorage数据会永久存在浏览器（除非手动清除），sessionStorage仅在当前会话有效，根据你的需求选择即可。

和本地存储类似，但Cookie有4KB大小限制，兼容性更好（支持老版本浏览器），适合传递小量数据。

页面1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <form id="form1">
        <input type="text" name="name" placeholder="输入姓名">
        <input type="email" name="email" placeholder="输入邮箱">
        <button type="submit">提交</button>
    </form>

    <script>
        // 设置Cookie的工具函数
        function setCookie(name, value, expireDays = 1) {
            const date = new Date();
            date.setTime(date.getTime() + (expireDays * 24 * 60 * 60 * 1000));
            const expires = "expires=" + date.toUTCString();
            document.cookie = `${name}=${encodeURIComponent(value)};${expires};path=/`;
        }

        $('#form1').submit(function(e) {
            e.preventDefault();
            const name = $('input[name="name"]').val();
            const email = $('input[name="email"]').val();

            // 把数据存入Cookie（编码避免特殊字符问题）
            setCookie('formName', name);
            setCookie('formEmail', email);

            // 跳转到页面2
            window.location.href = 'page2.html';
        });
    </script>
</body>
</html>

页面2代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面2</title>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="姓名">
        <input type="email" id="email" placeholder="邮箱">
    </form>

    <script>
        // 获取Cookie的工具函数
        function getCookie(name) {
            const value = "; " + document.cookie;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return decodeURIComponent(parts.pop().split(";").shift());
            return '';
        }

        // 给表单赋值
        document.getElementById('name').value = getCookie('formName');
        document.getElementById('email').value = getCookie('formEmail');

        // 用完清空Cookie
        document.cookie = "formName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        document.cookie = "formEmail=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    </script>
</body>
</html>

你可以根据数据敏感度、数据量大小选择合适的方案，比如敏感数据优先用sessionStorage，简单数据用URL参数就够了。

内容的提问来源于stack exchange，提问作者Mohit Kumar