使用LocalStorage在不同HTML页面间传递表单数据的完整教程

来源：IPIPP.com作者：陈平安时间：05-15

导读：本期聚焦于小伙伴创作的《使用LocalStorage在不同HTML页面间传递表单数据的完整教程》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《使用LocalStorage在不同HTML页面间传递表单数据的完整教程》有用，将其分享出去将是对创作者最好的鼓励。

HTML文件间数据传递指南：利用LocalStorage共享表单输入

在开发多页面的前端应用时，经常会遇到需要在不同HTML文件之间传递数据的场景，比如用户在A页面的表单中填写了信息，跳转到B页面时需要展示或使用这些信息。LocalStorage作为浏览器提供的本地存储方案，能在同源的不同页面间共享数据，非常适合用来实现这类需求。本文将通过一个完整的案例，演示如何利用LocalStorage在多个HTML文件间传递表单输入的内容。

一、LocalStorage基础说明

LocalStorage是Web Storage API的一部分，它允许我们将键值对数据存储在用户的浏览器中，存储的数据没有过期时间，除非被主动清除。它的核心特点是：

存储的数据仅在同源（协议、域名、端口都相同）的页面间共享
存储容量通常为5MB左右，远大于Cookie的4KB限制
只能通过JavaScript进行读写，服务端无法直接获取
存储的数据类型为字符串，复杂类型需要先序列化再存储

我们使用LocalStorage的setItem(key, value)方法存储数据，使用getItem(key)方法读取数据，这两个方法是实现跨页面数据传递的核心。

二、案例场景设计

我们设计两个简单的HTML页面：

表单页（form.html）：包含用户名、邮箱两个输入框，填写后点击保存按钮，将数据存入LocalStorage，再跳转到展示页
展示页（show.html）：页面加载时从LocalStorage中读取存储的表单数据，展示在页面上，同时提供清除数据的按钮

三、表单页（form.html）实现

表单页的核心逻辑是：监听保存按钮的点击事件，获取输入框的值，序列化后存入LocalStorage，然后跳转到展示页。下面是完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入页</title>
    <style>
        .form-container {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .form-item {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input {
            width: 100%;
            height: 32px;
            padding: 0 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            width: 100%;
            height: 36px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #096dd9;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>请输入信息</h2>
        <div class="form-item">
            <label for="username">用户名：</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-item">
            <label for="email">邮箱：</label>
            <input type="email" id="email" placeholder="请输入邮箱，例如user@ipipp.com">
        </div>
        <button id="saveBtn">保存并跳转</button>
    </div>

    <script>
        // 获取页面元素
        const saveBtn = document.getElementById('saveBtn');
        const usernameInput = document.getElementById('username');
        const emailInput = document.getElementById('email');

        // 保存按钮点击事件处理
        saveBtn.addEventListener('click', () => {
            // 获取输入框的值
            const username = usernameInput.value.trim();
            const email = emailInput.value.trim();

            // 简单校验，确保两个字段都填写了内容
            if (!username || !email) {
                alert('请填写完整的用户名和邮箱');
                return;
            }

            // 构造要存储的数据对象
            const formData = {
                username: username,
                email: email,
                saveTime: new Date().toLocaleString()
            };

            // 将对象序列化为JSON字符串存入LocalStorage，键名为formData
            localStorage.setItem('formData', JSON.stringify(formData));

            // 跳转到展示页
            window.location.href = 'show.html';
        });
    </script>
</body>
</html>

代码中的关键步骤：首先将用户输入的内容组成对象，然后使用JSON.stringify()将对象转换为字符串，再通过localStorage.setItem()存入LocalStorage。这里特意将邮箱示例的域名替换为了ipipp.com，符合我们的网址替换规则。

四、展示页（show.html）实现

展示页的核心逻辑是：页面加载完成后从LocalStorage中读取键名为formData的数据，反序列化后展示在页面上，同时提供清除数据的功能。下面是完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据展示页</title>
    <style>
        .show-container {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .data-item {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
        .data-label {
            font-weight: bold;
            color: #666;
        }
        .data-value {
            margin-top: 5px;
            color: #333;
        }
        .empty-tip {
            text-align: center;
            color: #999;
            padding: 20px 0;
        }
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        button {
            flex: 1;
            height: 36px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .clear-btn {
            background-color: #ff4d4f;
            color: white;
        }
        .clear-btn:hover {
            background-color: #cf1322;
        }
        .back-btn {
            background-color: #8c8c8c;
            color: white;
        }
        .back-btn:hover {
            background-color: #595959;
        }
    </style>
</head>
<body>
    <div class="show-container">
        <h2>已保存的表单信息</h2>
        <div id="dataContainer"></div>
        <div class="btn-group">
            <button class="clear-btn" id="clearBtn">清除数据</button>
            <button class="back-btn" id="backBtn">返回填写</button>
        </div>
    </div>

    <script>
        // 获取页面元素
        const dataContainer = document.getElementById('dataContainer');
        const clearBtn = document.getElementById('clearBtn');
        const backBtn = document.getElementById('backBtn');

        // 页面加载完成后读取LocalStorage中的数据
        window.addEventListener('load', () => {
            // 从LocalStorage中读取formData对应的字符串
            const formDataStr = localStorage.getItem('formData');

            // 如果没有存储的数据，显示提示信息
            if (!formDataStr) {
                dataContainer.innerHTML = '<div class="empty-tip">暂无保存的表单数据，请先填写</div>';
                return;
            }

            try {
                // 将JSON字符串反序列化为对象
                const formData = JSON.parse(formDataStr);

                // 将数据渲染到页面上
                dataContainer.innerHTML = `
                    <div class="data-item">
                        <div class="data-label">用户名：</div>
                        <div class="data-value">${formData.username}</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">邮箱：</div>
                        <div class="data-value">${formData.email}</div>
                    </div>
                    <div class="data-item">
                        <div class="data-label">保存时间：</div>
                        <div class="data-value">${formData.saveTime}</div>
                    </div>
                `;
            } catch (e) {
                // 如果数据格式错误，提示用户并清除错误数据
                dataContainer.innerHTML = '<div class="empty-tip">数据格式错误，已清除</div>';
                localStorage.removeItem('formData');
            }
        });

        // 清除数据按钮点击事件
        clearBtn.addEventListener('click', () => {
            localStorage.removeItem('formData');
            dataContainer.innerHTML = '<div class="empty-tip">数据已清除</div>';
            alert('表单数据已成功清除');
        });

        // 返回填写按钮点击事件
        backBtn.addEventListener('click', () => {
            window.location.href = 'form.html';
        });
    </script>
</body>
</html>

这里读取数据时先使用localStorage.getItem()获取字符串，再通过JSON.parse()转换为对象，同时做了异常捕获，避免因为存储的数据格式错误导致页面报错。如果读取不到数据，会显示对应的提示信息。

五、注意事项与扩展

使用LocalStorage传递数据时，有几个点需要特别注意：

存储复杂数据时一定要先序列化，读取时再反序列化，避免存储失败或者读取到错误的数据
LocalStorage存储的是字符串，如果直接存储对象，会调用对象的toString()方法，得到[object Object]这样的无效内容
如果需要存储敏感信息（比如用户密码），不建议使用LocalStorage，因为它可以被同域下的任意JavaScript代码访问，存在安全风险
如果需要监听LocalStorage的变化，可以使用storage事件，当同源的其他页面修改LocalStorage时，当前页面会触发这个事件，可以用来实现数据的实时同步

除了LocalStorage，SessionStorage也可以实现页面间数据传递，但SessionStorage的数据仅在当前浏览器标签页有效，关闭标签页后数据就会被清除，而LocalStorage的数据会一直保留，大家可以根据实际场景选择合适的存储方案。

LocalStorage HTML页面数据传递表单数据共享 JavaScript存储前端跨页面通信

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。