📅 最后修改于: 2023-12-03 15:23:46.248000 🧑 作者: Mango
在Web开发中，有时我们需要从一个HTML文件向另一个HTML文件传输数据。这可以通过使用HTML Web Storage API实现。本文将介绍如何使用HTML Web Storage API在两个HTML文件之间传输数据。
HTML Web Storage API提供了一种在客户端存储键/值对数据的机制。该API可用于在同一浏览器标签或窗口之间共享数据，并且数据在浏览器关闭后仍然可用。HTML Web Storage API包括两种机制：
localStorage：存储长期使用的数据（数据不会过期）sessionStorage：存储短期使用的数据（数据在页面会话结束时自动删除）这两种机制都支持相同的API：
setItem(key, value)：将键/值对存储在Web Storage中getItem(key)：从Web Storage中检索指定键的值removeItem(key)：从Web Storage中删除指定键/值对clear()：从Web Storage中删除所有键/值对假设我们有两个HTML文件：page1.html和page2.html，我们想要在这两个文件之间传输数据。我们可以使用localStorage API：
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>Page 1</h1>
<p>Enter your name:</p>
<input type="text" id="nameInput">
<button onclick="saveData()">Save Data</button>
<script>
function saveData() {
var name = document.getElementById("nameInput").value;
localStorage.setItem("name", name);
window.location.href = "page2.html";
}
</script>
</body>
</html>
在上面的代码中，我们使用localStorage.setItem()将名字存储在name键下，并在按钮单击后将浏览器重定向到page2.html。
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Page 2</h1>
<p>Welcome, <span id="nameSpan"></span>!</p>
<script>
var name = localStorage.getItem("name");
document.getElementById("nameSpan").innerHTML = name;
</script>
</body>
</html>
在上面的代码中，我们使用localStorage.getItem()获取名字，并将其显示在<span>元素中。
通过使用HTML Web Storage API，我们可以轻松地在两个HTML文件之间传输数据。我们可以使用localStorage存储长期使用的数据，并在需要时检索它。