Javascript ES6：设置 <h1> 与本地存储和表单提交

Question

I am trying to set the element #welcome_banner by using a function in javascript that takes a form submission and sets it to localStorage and then pulls that info and sets it onto an <h1> tag. 我试图通过使用javascript中的函数来设置元素#welcome_banner ，该函数接受表单提交并将其设置为localStorage ，然后提取该信息并将其设置到<h1>标记上。 Apparently it works but only changes the tag for a millisecond and then it disappears! 显然，它可以工作，但是只更改标签一毫秒，然后它消失了！ I have tried doing the .innerHTML setting in various places inside and outside of the function clickHandler() and in the main body of the script. 我尝试在function clickHandler()内部和外部以及脚本主体中的各个位置进行.innerHTML设置。 I am certain this is something superbasic I am missing. 我敢肯定这是我所缺少的基础知识。

<!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>

Answer 1

The steps to do this are as follows: 为此，请按照以下步骤操作：

Store the typed text in localStorage, you're doing this in the event handler for the form submission: localStorage.setItem('dn', dn); 将键入的文本存储在localStorage中，您可以在事件处理程序中进行表单提交： localStorage.setItem('dn', dn);
When you submit the form, the page is going to refresh from the server. 提交表单时，页面将从服务器刷新。 This is why you're only seeing the text briefly, then the page reloads from the server with no knowledge of what was there before. 这就是为什么您只看到简短的文本，然后从服务器重新加载页面而又不知道以前的内容的原因。
Look for information about page events and write a handler for the DOMContentLoaded event like you did for your submit event handler. 查找有关页面事件的信息，并为DOMContentLoaded事件编写一个处理程序，就像为Submit事件处理程序所做的一样。 DOMContentLoaded is well supported these days. 如今，DOMContentLoaded得到了很好的支持。 Something like: document.addEventListener("DOMContentLoaded", function(event) { // code to check local storage goes here... }); 类似于： document.addEventListener("DOMContentLoaded", function(event) { // code to check local storage goes here... });
In that handler you want to check localStorage like you're doing here: var dn = localStorage.getItem('dn').value; 在该处理程序中，您要像在此处一样检查localStorage： var dn = localStorage.getItem('dn').value; and if there is a value there, set the innerHtml of the <h1> to that value, like you're doing here: welcomBanner.innerHTML = 'Hello ${dn}'; 然后，如果有一个值，则将<h1>的innerHtml设置为该值，就像您在此处所做的那样： welcomBanner.innerHTML = 'Hello ${dn}';

I think you might have had a stray # character in your localStorage.getItem call that I removed in the steps above. 我认为您可能在我在上述步骤中删除的localStorage.getItem调用中有一个流浪＃字符。 You might also want to have default text you post if there's nothing found in localStorage when you check. 如果您在检查时在localStorage中找不到任何内容，则可能还需要发布默认文本。

Answer 2

Here's a simplified example: If you are calling a function to get the value from Local Storage, be sure you have a return 这是一个简化的示例：如果您要调用一个函数以从本地存储中获取值，请确保已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>

Javascript ES6：设置 <h1> 与本地存储和表单提交

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-11-30 21:35:59

解决方案2
1 2018-11-30 21:53:53

Javascript ES6：设置 <h1> 与本地存储和表单提交

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-11-30 21:35:59

解决方案2 1 2018-11-30 21:53:53

解决方案1
1 已采纳 2018-11-30 21:35:59

解决方案2
1 2018-11-30 21:53:53