我正试图使用javascript中的一个函数来设置元素#welcome_banner，该函数接受表单提交并将其设置为localStorage，然后提取该信息并将其设为<h1>标记。显然它是有效的，但只改变了标签一毫秒，然后它就消失了！我已经尝试在function clickHandler()内外的各个地方以及脚本主体中进行.innerHTML设置。我确信这是我所缺少的最基本的东西。
<!DOCTYPE html>
<html>
<head>
</head>
<script >
//set display name to form submission, set welcome banner to display name
function clickHandler () {
document.querySelector('#display_name').onsubmit = function() {
localStorage.setItem('dn', dn);
document.querySelector('#welcome_banner').innerHTML=changeWelcomeBanner;
}
};
function changeWelcomeBanner () {
var dn = localStorage.getItem('#dn').value;
var welcomeBanner = document.getElementById('#welcome_banner');
welcomBanner.innerHTML = `Hello ${dn}`;
}
</script>
<title>Project 2</title>
<body style="background-color:#ff3300;">
<h1 id="welcome_banner"></h1>
<form id="display_name">
<input id="dn" autocomplete="off" autofocus placeholder="" type="text">
<button>set display name</button>
</body>
</html>
执行此操作的步骤如下：
- 将键入的文本存储在localStorage中，您在表单提交的事件处理程序中执行此操作：
localStorage.setItem('dn', dn); - 提交表单时，页面将从服务器刷新。这就是为什么你只看到了简短的文本，然后页面从服务器上重新加载，而不知道之前有什么
- 查找有关页面事件的信息，并像编写提交事件处理程序一样为DOMContentLoaded事件编写处理程序。DOMContentLoaded现在得到了很好的支持。类似于：
document.addEventListener("DOMContentLoaded", function(event) { // code to check local storage goes here... }); - 在该处理程序中，您需要像在这里一样检查localStorage：
var dn = localStorage.getItem('dn').value;，如果那里有值，则将<h1>的innerHtml设置为该值，就像在这里一样：welcomBanner.innerHTML = 'Hello ${dn}';
我认为您的localStorage.getItem调用中可能有一个杂散的#字符，我在上面的步骤中删除了它。如果检查时在localStorage中找不到任何内容，您可能还希望发布默认文本。
下面是一个简化的示例：如果您正在调用函数以从本地存储获取值，请确保您有return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="welcome"></h1>
<input type="text" id="something">
<button type="button" id="click">CLICK ME</button>
<script>
document.getElementById("click").addEventListener("click", function(){
var x=document.getElementById("something").value;
document.getElementById("welcome").innerHTML=x;
localStorage.setItem('x', JSON.stringify(x));
document.getElementById("welcome").innerHTML = getData();
});
function getData(){
var retrieve=localStorage.getItem('x');
return JSON.parse(retrieve); //Now return the value
}
</script>
</body>
</html>