HTML 文件间数据共享教程：通过 localStorage 传递表单输入值

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML 文件间数据共享教程：通过 localStorage 传递表单输入值

2025-10-10

浏览次数：次

返回列表

HTML 文件间数据共享教程：通过 localStorage 传递表单输入值

本教程详细讲解如何在不同 HTML 文件之间安全有效地共享表单输入数据。通过利用浏览器提供的 localStorage API，我们可以将源页面收集的用户输入数据持久化存储在客户端，然后在目标页面中检索并使用这些数据，从而实现跨页面的信息传递，无需依赖服务器端操作。

引言：理解跨页面数据传输的需求

在 web 开发中，经常会遇到这样的场景：用户在一个 html 页面中输入了信息（例如填写表单），然后需要将这些信息传递到另一个 html 页面进行展示或进一步处理。原问题中提到的“如何在另一个 html 文件中使用一个 html 文件的类和 id”实际上是对这种数据传输需求的误解。html 元素的类和 id 是其内部 dom 元素的标识符，它们本身不能直接跨文件“使用”。真正的需求是实现不同页面间的数据共享。

本文将介绍一种常用且高效的客户端数据存储机制——localStorage，来解决这一问题。通过 localStorage，我们可以在浏览器中持久化存储数据，使其在用户关闭浏览器后依然存在，并且可以在同一域下的不同页面间共享。

使用 localStorage 进行跨页面数据传输的原理

localStorage 是 Web Storage API 的一部分，它允许 Web 应用程序在用户的浏览器中存储键值对。这些数据以字符串形式存储，并且在浏览器会话结束后仍然保留，除非用户手动清除或通过代码移除。其主要特点包括：

持久性： 数据在浏览器关闭后依然存在。
同源策略： 只有在同一域下的页面才能访问存储的数据。
存储容量： 通常为 5MB 或更大。
API 简单： 提供 setItem()、getItem()、removeItem() 和 clear() 等方法。

我们将通过两个 HTML 文件来演示这一过程：一个用于收集表单数据（源页面），另一个用于展示这些数据（目标页面）。

步骤一：在源页面中收集并存储数据

首先，我们需要创建一个包含表单的 HTML 页面，当用户提交表单时，我们捕获输入值，并将其存储到 localStorage 中。

HTML 结构 (index.html)

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

<!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>
        body { font-family: Arial, sans-serif; margin: 20px; }
        form { background-color: #f4f4f4; padding: 20px; border-radius: 8px; max-width: 400px; margin: auto; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"] { width: calc(100% - 22px); padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; }
        button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #45a049; }
    </style>
</head>
<body>
    <form id="studentForm">
        <h2>学生信息录入</h2>
        <label for="studentName">学生姓名:</label>
        <input type="text" id="studentName" placeholder="请输入学生姓名" required>

        <label for="studentId">学号:</label>
        <input type="text" id="studentId" placeholder="请输入学号" required>

        <label for="studentClass">班级:</label>
        <input type="text" id="studentClass" placeholder="请输入班级">

        <button type="submit">提交信息</button>
    </form>

    <script>
        // 获取表单元素
        const form = document.getElementById("studentForm");

        // 监听表单提交事件
        form.addEventListener("submit", function(event) {
            // 阻止表单默认提交行为，避免页面刷新
            event.preventDefault();

            // 获取输入框的值
            const studentName = document.getElementById('studentName').value;
            const studentId = document.getElementById('studentId').value;
            const studentClass = document.getElementById('studentClass').value;

            // 将获取到的数据封装成一个 J*aScript 对象
            const studentData = {
                name: studentName,
                id: studentId,
                class: studentClass
            };

            // 将 J*aScript 对象转换为 JSON 字符串并存储到 localStorage
            // 注意：localStorage 只能存储字符串
            localStorage.setItem("currentStudent", JSON.stringify(studentData));

            // 提交成功后，可以给用户一个反馈，并跳转到目标页面
            alert("学生信息已成功保存！");
            window.location.href = "display.html"; // 跳转到展示页面
        });
    </script>
</body>
</html>

代码解析：

event.preventDefault(): 这是关键一步，它阻止了表单的默认提交行为（通常会导致页面刷新或跳转），从而允许我们通过 J*aScript 处理数据。
document.getElementById().value: 通过元素的 ID 获取对应的输入框，并取出其当前的值。
创建 J*aScript 对象: 将所有相关数据组织成一个对象，这有助于保持数据结构清晰。
JSON.stringify(studentData): localStorage 只能存储字符串。因此，我们需要使用 JSON.stringify() 方法将 J*aScript 对象转换为 JSON 格式的字符串。
localStorage.setItem("currentStudent", ...): 将转换后的字符串存储到 localStorage 中。"currentStudent" 是我们为这组数据定义的键名，后续将通过这个键名来检索数据。
window.location.href = "display.html";: 在数据存储成功后，我们通常会引导用户到展示数据的页面。

步骤二：在目标页面中检索并使用数据

接下来，我们创建另一个 HTML 页面 (display.html)，用于从 localStorage 中读取之前存储的数据，并将其展示出来。

HTML 结构 (display.html)

<!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>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { background-color: #e6f7ff; padding: 20px; border-radius: 8px; max-width: 600px; margin: auto; border: 1px solid #91d5ff; }

以上就是HTML 文件间数据共享教程：通过 localStorage 传递表单输入值的详细内容，更多请关注其它相关文章！

# 这一 # 宜良谷歌seo新手教学 # seo网站制作步骤 # 海淀视频网站建设 # 南昌放心的网站推广平台 # 口碑营销推广文案 # 旅游投资公司网站建设 # 西安seo矩阵重要吗 # 小红书seo与sem # 石城seo优化合作 # 温州网站推广哪家有名 # 通常会 # 连接到 # 转换为 # 我们可以 # 键值 # javascript # 请输入 # 数据结构 # 置顶 # 表单 # red # 键值对 # 表单提交 # 持久化存储 # win # ai # 浏览器 # json # js # html # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：Node.js 服务器渲染 HTML 文件显示为文本的解决方案

下一篇：css align-self与align-items冲突如何处理

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

HTML 文件间数据共享教程：通过 localStorage 传递表单输入值

引言：理解跨页面数据传输的需求

使用 localStorage 进行跨页面数据传输的原理

步骤一：在源页面中收集并存储数据

步骤二：在目标页面中检索并使用数据