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

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 中。

立即学习“前端免费学习笔记（深入）”；

ChatX翻译

最实用、可靠的社交类实时翻译工具。支持全球主流的20+款社交软件的聊天应用，全球200+语言随意切换。让您彻底告别复制粘贴的翻译模式，与世界各地高效连接！

下载

HTML 结构 (index.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)