how to locally store and use html form data

I have made a basic html webpage having a login screen with username and password and after validating the form it will redirect to another page.

Now I want to save the data in localstorage and show the login details within the webpages as the user to see his information.

Help me to achieve the functionality by modifying my code below:

index.html -

            <form class="form">
                <label>Username</label>
                <div>
                    <input type="text" id="username" placeholder="Enter Username" autocomplete="off">
                </div>
                <label>Password</label>
                <div>
                    <input type="password" id="password" placeholder="Enter Password">
                </div>
                <a href="#" class="forgot">Forgot Password?</a>
                <input type="submit" value="Login">
            </form>

script.js -

window.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".form").addEventListener("submit", function(e) {
        const username = this.username.value;
        const password = this.password.value;
         if(username.length > 4 && password.length > 4){
          this.action = "landing.html";
          } else {
          e.preventDefault();
          alert("Invalid credentials");
          }
    })
})

So I want to store the username and password in the localstorage and display the information in the landing page after validating the form data on login page. Guide me how I can achieve the functionality I want to implement.