登录
首页 >  文章 >  前端

HTML表单数据共享：localStorage使用教程

时间：2025-10-19 10:36:38 216浏览 收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《HTML表单数据共享：localStorage传递方法教程》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

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)

<!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>
        &lt;input type=&quot;text&quot; id=&quot;studentName&quot; placeholder=&quot;请输入学生姓名&quot; required&gt;

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

        <label for="studentClass">班级:</label>
        &lt;input type=&quot;text&quot; id=&quot;studentClass&quot; placeholder=&quot;请输入班级&quot;&gt;

        <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;

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

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

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

代码解析：

  1. event.preventDefault(): 这是关键一步，它阻止了表单的默认提交行为（通常会导致页面刷新或跳转），从而允许我们通过 JavaScript 处理数据。
  2. document.getElementById().value: 通过元素的 ID 获取对应的输入框，并取出其当前的值。
  3. 创建 JavaScript 对象: 将所有相关数据组织成一个对象，这有助于保持数据结构清晰。
  4. JSON.stringify(studentData): localStorage 只能存储字符串。因此，我们需要使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 格式的字符串。
  5. localStorage.setItem("currentStudent", ...): 将转换后的字符串存储到 localStorage 中。"currentStudent" 是我们为这组数据定义的键名，后续将通过这个键名来检索数据。
  6. 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使用教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>