我有页面№1，我输入文本到表单。然后，在form_check()函数中，我写入name变量。之后，我需要打开页面№2和输出文本与name变量的值在那里。我使用localStorage将name变量写入name_result键。我使用window.location.href = 'page2.html'切换到另一个页面，并调用result()函数，在其主体中，我通过键从localStorage获取值，并通过document.getElementById()将其传递给HTML。但是name变量的值没有出现在第2页上。
HTML (page№1):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page1</title>
</head>
<body>
<form>
<label>Name:</label>
<input type="text" id="name">
</form>
<button type="button" onclick="form_check()">Submit</button>
<script src="/script.js"></script>
</body>
</html>
HTML (page№2):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" src="/style.css">
<title>page2</title>
</head>
<body>
<p>The name was introduced: <i id="name_result"></i></p>
<script src="/script.js"></script>
</body>
</html>
JavaScript:
function result()
{
console.log(localStorage.name_result);
document.addEventListener(`DOMContentLoaded`, function() {
document.getElementById(`name_result`).innerHTML = localStorage.name_result;
});
}
function form_check()
{
let name = String(document.getElementById(`name`).value);
localStorage.setItem(`name_result`, name);
window.location.href = `page2.html`;
result();
}
我还尝试通过结果函数参数传递name变量的值，但结果是相同的。
在您的代码中，您正在更改第一页上的location.href，因此result函数不会影响第二页。要解决这个问题，请将事件侦听器移出result函数，这样它就可以在两个页面上运行。在DOMContentLoaded的处理程序中，如果设置了localStorage值，则调用result函数:
function result(name) {
const result = document.getElementById('name_result');
if (result) result.innerHTML = name;
}
document.addEventListener(`DOMContentLoaded`, function() {
const nameResult = localStorage.getItem(`name_result`);
if (nameResult) {
result(nameResult);
}
});
function form_check() {
const name = document.getElementById(`name`).value;
localStorage.setItem(`name_result`, name);
window.location.href = `page2.html`;
}