將輸入表單數據發送到不同頁面上的登錄表單（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();