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

Question

I have a 2-part login where you enter your username on the first page, then, the second page opens via window.open() and I want to autofill the username data from the first page into the username field on the second page.

Here's my code (1st page):

    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;
        });

The second page is just a standard login page with username and password fields and are set up like <input type="text" id="USERNAME2" name="USERNAME2" placeholder="username" class="text_field item" >

Can I use a session cookie to somehow send the form data over to the second page?

Answer 1

As a backend developer we stores the temporary information in the session and you can get the help of storing sessions in js in this thread here And when the next page is loaded then you can load the session data using the same process.

// 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();