将值从文本框传递到不同的HTML页面

Question

所以我有一个主页，提示用户在文本框中输入用户名。当用户点击文本框下面写着“完成设置档案”的按钮时，它会把用户带到一个新的名为createUser的超文本标记语言页面，其中包含多个文本框，提示用户填写密码、年龄、性别等。

createUser中的第一个文本框将是用户名框。我希望用户从主页输入的用户名保存并显示在createUser中显示的文本框中。用户仍然可以编辑他们的用户名，如果他们想要这个文本框，但我想让它，如果用户输入“萨拉”在主页上，用户名文本框上的新页面将自动填充时，它的名字“萨拉”时，他们不必再次填写它(但仍然可以编辑，如果他们想)。

我在网上发现了几个类似的问题，并以下面的代码结束。它目前不起作用，我想知道是否有人可以帮助我朝着正确的方向发展？

homepage.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form>
    <input type="text" id="username" ><br><br>
</form>


<div id="createUser"><a href="createUser.html">FINISH SETTING UP PROFILE</a></div>

<script src="homepage.js"></script>

</body>
</html> 

homepage.js

function onClickHandler(){
    location.href = 'createUser.html?name=' + document.getElementById('username').value;
}

createUser.html

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<h2>FINISH FILLING OUT INFO</h2>

<form>
    <input type="text" id="username" ><br><br>
</form>

<script src="createUser.js"></script>

</body>
</html> 

createUser.js

function parseQueryString(){
    var queryDict = {}
    location.search.substr(1).split("&").forEach(function(item) {
        queryDict[item.split("=")[0]] = item.split("=")[1]
    });

    return queryDict;
}

function onLoadHandler(){
    document.getElementById('username').value = parseQueryString().name;
}

Answer 1

尝试将其添加到homepage.js上，它将在用户单击链接时侦听，并在请求下一页之前更改href。

function onClickHandler(e){
    document.querySelector('a').href = "createUser.html?name=" + document.getElementById('username').value; 
}

window.onload = function() {
    document.querySelector('a').addEventListener('click', onClickHandler);
}

将其添加到createUser.js的末尾，以便在窗口加载后填充输入

window.onload = onLoadHandler;

Answer 2

我认为通过将用户名作为查询参数传递，您上面的建议听起来是正确的。我推荐使用URLSearchParams api，因为它会给开发人员带来非常好的体验。

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

到了这样的程度

function parseQueryString(){
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
    queryDict[item.split("=")[0]] = item.split("=")[1]
});

return queryDict;
}

function onLoadHandler(){
  document.getElementById('username').value = parseQueryString().name;
}

可以转化为，输入查询字符串为createUser.html?name=

 function parseQueryString(){
    const queryParams = window.location.search;
    const searchParams = new URLSearchParams(paramsString);
    if(searchParams.has("name")){
      return searchParams.get("name");
    }
    
    return null
  }

    function onLoadHandler(){
     const userNameFromQueryString = parseQueryString();
     if(userNameFromQueryString){
     document.getElementById('username').value = userNameFromQueryString
     }
    }

然后，在文件的主体中，您希望这个js执行add

<body onload="onLoadHandler()">

希望这能对你有所帮助