本教程详细讲解如何在不同 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)
学生信息录入 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; }学生信息录入
// 获取表单元素 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"; // 跳转到展示页面 });
代码解析：
event.preventDefault(): 这是关键一步，它阻止了表单的默认提交行为（通常会导致页面刷新或跳转），从而允许我们通过 JavaScript 处理数据。document.getElementById().value: 通过元素的 ID 获取对应的输入框，并取出其当前的值。创建 JavaScript 对象: 将所有相关数据组织成一个对象，这有助于保持数据结构清晰。JSON.stringify(studentData): localStorage 只能存储字符串。因此，我们需要使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 格式的字符串。localStorage.setItem(“currentStudent”, …): 将转换后的字符串存储到 localStorage 中。”currentStudent” 是我们为这组数据定义的键名，后续将通过这个键名来检索数据。window.location.href = “display.html”;: 在数据存储成功后，我们通常会引导用户到展示数据的页面。
步骤二：在目标页面中检索并使用数据
接下来，我们创建另一个 HTML 页面 (display.html)，用于从 localStorage 中读取之前存储的数据，并将其展示出来。
HTML 结构 (display.html)
学生信息详情 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 传递表单输入值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583008.html
微信扫一扫 
支付宝扫一扫 
