将输入表单数据发送到不同页面上的登录表单（HTML/js）

Question

我有一个两部分登录，您在第一页输入您的用户名，然后，第二页通过window.open()打开，我想将第一页的用户名数据自动填充到第二页的用户名字段中。

这是我的代码（第一页）：

    const $document = $(document);
        const $login = $("#login");
        const $loginBox = $("#loginbox");

        const $formElement = $(`
          <div class="loginContainer">
            <label for="userNameBox"><b>Username: </b></label>
            <input type="text" class="userName"id="userNameBox" placeholder="Enter Username"required="required">
            <input type="button" class="loginButton" id="loginButton" value="Login"/>
          </div>
        `);

        $document.on("click", "#loginButton", function() {
          const $userNameBox = $("#userNameBox");

          if ($userNameBox.val() !== "") {
            window.open('secondPage.com','_blank');
          } else {
            alert("Please Enter a Username.");
            location.reload();
          }
        });

          $('.login').click(function(e) {

          if ($loginBox.children().length === 0) {
            $loginBox.append($formElement);

          }

          $("#loginbox").show();

          event.preventDefault();
          return false;
        });

第二个页面只是一个标准的登录页面，包含用户名和密码字段，设置类似于<input type="text" id="USERNAME2" name="USERNAME2" placeholder="username" class="text_field item" >

我可以使用 session cookie 以某种方式将表单数据发送到第二页吗？

Answer 1

作为后端开发人员，我们将临时信息存储在 session 中，您可以在此线程中获得在 js 中存储会话的帮助当加载下一页时，您可以使用相同的过程加载 session 数据。

// Save data to sessionStorage
sessionStorage.setItem('dataStored', data.xhr.response);

// Get saved data from sessionStorage
var data = sessionStorage.getItem('dataStored');

// Remove saved data from sessionStorage
sessionStorage.removeItem('dataStored');

// Remove all saved data from sessionStorage
sessionStorage.clear();