将值从文本框传递到另一个 HTML 页面

Question

所以我有一个主页，提示用户在文本框中输入用户名。当用户单击显示 'FINISH SETTING UP PROFILE' 的文本框下方的按钮时，它将把他们带到一个名为 createUser 的新 HTML 页面，该页面包含多个文本框，提示用户填写密码、年龄、性别等

createUser 中的第一个文本框将是用户名框。我希望用户从主页输入的用户名保存并显示在 createUser 中显示的文本框中。如果用户愿意，他们仍然可以使用此文本框编辑他们的用户名，但我希望这样，如果用户在主页中输入“Sarah”，新页面上的用户名文本框将自动填充名称“Sarah”当它加载时，他们不必再次填写（但如果他们愿意，仍然可以编辑）。

网上找了几个类似的问题，最后得到下面的代码。它目前不起作用，想知道是否有人可以帮助我朝着正确的方向前进？

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 它会在用户单击 link 并在请求下一页之前更改 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 加载后填充输入

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执行的文件正文中添加

<body onload="onLoadHandler()">

希望对您有所帮助

将值从文本框传递到另一个 HTML 页面

Passing value from textbox to a different HTML page

html

javascript

textbox

onclick

button