Javascript - 仅将输入值的一部分保存到 localStorage

Question

我有一个页面，用户被询问他的名字并且必须在文本框中输入它。

我希望他能够输入完整的句子，例如“我的名字是 John Doe”，并收到类似“您好，John Doe。欢迎来到此页面”的问候语。

我设法通过忽略输入中的单词组合来实现这一点，例如“我的名字是”、“我是”和“我是”。输入的其余部分很可能是用户名。

我现在的问题是，如何将用户名保存到 localStorage，以便稍后在不同的页面上使用它？我无法保存用户输入的所有内容。那会让我得到类似“欢迎回来，我的名字是 John Doe”之类的东西。

我只想保存替换后剩下的单词。

这是我的:

function myFunction() {
            var text;
            var answers = document.getElementById("userInput").value.toLowerCase();
            answers = answers.replace(/[^a-z0-9' ]/g, "");
            answers = answers.replace("my name is", "");
            answers = answers.replace("i am", "");
            answers = answers.replace("i'm", "");
            switch (answers) {
                case "":
                    text = "Please tell me your name.";
                    break;
                default:
                    text = "Hello, " + CapitalizeName(answers) + ". Welcome to this page.";
            }
            document.getElementById("greeting").innerHTML = text;
            document.getElementById("userInput").value = "";
            localStorage.setItem("userName", CapitalizeName(answers));
        }

        function CapitalizeName(name) {
            let _array = name.split(" ");
            let n_array = [];
            _array.map(w => {
                w = w.charAt(0).toUpperCase() + w.slice(1);
                n_array.push(w);
            });
            return n_array.join(" ");
        }

<p>What is your name?</p>
    <input id="userInput" type="text" spellcheck="false" autofocus onKeyDown="if(event.keyCode==13) myFunction();">
    <p id="greeting"></p>

在第二页，我有这个:

localStorage.getItem("userName");

document.getElementById("helloUser").innerHTML = "Welcome back " + userName + "!";

<p id="helloUser"></p>

我的猜测是我没有以正确的方式保存它。我尝试在线搜索解决方案，但找不到任何具体的解决方案。

Answer 1

以下将适用于您的整个域。

请注意，出于安全原因(已阻止)，它没有出现在示例中。

data.onchange = (function(){
  localStorage.setItem("userName", data.value)
})
var userName = localStorage.getItem("userName");

document.getElementById("helloUser").innerHTML = "Welcome back " + userName + "!";

<input id="data">
<p id="helloUser"></p>