HTML页面间数据传递教程：利用LocalStorage实现文本框内容显示-html教程-PHP中文网

HTML页面间数据传递教程：利用LocalStorage实现文本框内容显示

花韻仙語

发布： 2025-09-29 15:51:20

原创

326人浏览过

HTML页面间数据传递教程：利用LocalStorage实现文本框内容显示

本教程详细讲解如何使用浏览器本地存储（LocalStorage）在不同HTML页面间传递数据。通过一个将文本框内容从提交页面发送到接收页面并显示出来的实例，您将学习如何利用JavaScript的localStorage.setItem()和localStorage.getItem()方法，实现页面间的数据持久化和共享，确保数据在页面跳转后依然可用。

在web开发中，经常需要将用户在一个页面输入的数据传递到另一个页面进行显示或处理。本文将以一个具体的场景为例，演示如何高效且正确地使用localstorage来实现html页面间的数据传递。

理解LocalStorage

localStorage是Web Storage API的一部分，它允许Web应用程序在用户的浏览器中存储键值对数据，且这些数据没有过期时间，除非用户手动清除浏览器缓存或应用程序显式删除。

localStorage的特点：

持久性： 数据在浏览器关闭后依然存在。
同源策略： 只有来自同一域名的页面才能访问和修改其localStorage数据。
容量限制： 通常为5-10MB，具体取决于浏览器。
数据类型： localStorage只能存储字符串。如果需要存储对象或数组，必须先使用JSON.stringify()将其转换为JSON字符串，并在读取时使用JSON.parse()解析回来。

实现步骤

我们将创建一个“公告发布”页面，用户在此输入公告内容，然后点击提交，内容将显示在“公告存档”页面。

步骤一：创建数据提交页面 (Announcement Page)

首先，我们需要一个HTML页面来收集用户的输入。

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

HTML结构 (announcement.html)：

<!DOCTYPE html>
<html>
<head>
    <title>公告发布页面</title>
    <link rel="stylesheet" href="stylem.css" />
</head>
<body>
    <form method="get" action="archive.html" onsubmit="handleSubmit()">
        <label for="textbox">输入公告内容：</label><br>
        <textarea id="textbox" class="textbox" cols="60" rows="10"></textarea><br>
        <input type="submit" id="save" name="save" value="发布公告" />
    </form>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

登录后复制

JavaScript逻辑 (index.js)：

function handleSubmit() {
    // 获取文本框的值
    const textboxValue = document.getElementById('textbox').value;

    // 将数据存储到localStorage中，键名为"AnnouncementData"
    localStorage.setItem("AnnouncementData", textboxValue);

    // 注意：这里不需要返回任何值，因为表单的默认提交行为会处理页面跳转。
    // 如果不希望表单跳转，则需要event.preventDefault()。
    // 在本例中，我们希望跳转到archive.html，所以让其自然发生。
}

登录后复制

解释：

我们在form标签上添加了onsubmit="handleSubmit()"事件监听器。这意味着当表单提交时，handleSubmit函数会被调用。
在handleSubmit函数中，我们通过document.getElementById('textbox').value获取了文本框的当前内容。
localStorage.setItem("AnnouncementData", textboxValue)将获取到的文本内容存储到localStorage中，并为其指定了一个键名"AnnouncementData"。这个键名在接收页面中将用于检索数据。
form的action="archive.html"确保在数据存储后，浏览器会自动导航到archive.html页面。

步骤二：创建数据接收页面 (Archive Page)

接下来，我们需要一个HTML页面来显示从localStorage中获取的数据。

HTML结构 (archive.html)：

Google Antigravity

谷歌推出的AI原生IDE，AI智能体协作开发

277

查看详情

<!DOCTYPE html>
<html>
<head>
    <title>公告存档</title>
    <link rel="stylesheet" href="stylea.css" />
</head>
<body>
    <h2>最新公告：<span id="result-text"></span></h2>
    <script type="text/javascript" src="archive.js"></script>
</body>
</html>

登录后复制

JavaScript逻辑 (archive.js)：

window.addEventListener('load', () => {
    // 页面加载完成后执行此函数

    // 从localStorage中获取键名为"AnnouncementData"的数据
    const storedData = localStorage.getItem('AnnouncementData');

    // 将获取到的数据显示在指定的<span>元素中
    if (storedData) {
        document.getElementById('result-text').innerHTML = storedData;
    } else {
        document.getElementById('result-text').innerHTML = "暂无公告内容。";
    }
});

登录后复制

解释：

window.addEventListener('load', ...)确保在整个页面（包括所有资源，如图片）加载完成后才执行获取数据的操作。
localStorage.getItem('AnnouncementData')通过之前设置的键名"AnnouncementData"从localStorage中检索数据。
如果数据存在（storedData不为null），则将其内容赋值给ID为"result-text"的元素的innerHTML属性，从而在页面上显示出来。

注意事项与最佳实践

数据类型： localStorage只能存储字符串。如果需要存储JavaScript对象或数组，请务必使用JSON.stringify()在存储前进行序列化，并在读取后使用JSON.parse()进行反序列化。

示例：

// 存储对象
const myObject = { name: "张三", age: 30 };
localStorage.setItem("userData", JSON.stringify(myObject));

// 读取对象
const storedObject = JSON.parse(localStorage.getItem("userData"));
console.log(storedObject.name); // 输出 "张三"

登录后复制

数据清除：
- localStorage.removeItem(key)：删除指定键名的数据。
- localStorage.clear()：清除所有localStorage数据（慎用，会影响同源下的所有应用）。
安全性： localStorage不适合存储敏感信息，因为它容易受到跨站脚本攻击（XSS）。如果需要存储敏感数据，应考虑使用HTTP Only Cookies或服务器端会话。
容量限制： 尽管容量较大，但仍应避免存储超大数据，以免影响性能或超出限制。
与URL参数和SessionStorage的对比：
- URL参数 (?key=value)： 适用于少量、非敏感数据的页面间传递，数据会在URL中暴露，且在页面刷新或关闭后丢失。
- sessionStorage： 与localStorage类似，但数据只在当前会话（浏览器标签页或窗口）有效，关闭标签页或窗口后数据即被清除。适用于临时会话数据。
- localStorage： 适用于需要长期保存且跨页面、跨会话共享的数据。