title: how to locally store and use html form data
body: <p>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.</p>
  <p>Now I want to save the data in localstorage and show the login details within the webpages as the user to see his information.</p>
  <p>Help me to achieve the functionality by modifying my code below:</p>
  <p>index.html -</p>
  <pre><code>            &lt;form class=&quot;form&quot;&gt;
                  &lt;label&gt;Username&lt;/label&gt;
                  &lt;div&gt;
                      &lt;input type=&quot;text&quot; id=&quot;username&quot; placeholder=&quot;Enter Username&quot; autocomplete=&quot;off&quot;&gt;
                  &lt;/div&gt;
                  &lt;label&gt;Password&lt;/label&gt;
                  &lt;div&gt;
                      &lt;input type=&quot;password&quot; id=&quot;password&quot; placeholder=&quot;Enter Password&quot;&gt;
                  &lt;/div&gt;
                  &lt;a href=&quot;#&quot; class=&quot;forgot&quot;&gt;Forgot Password?&lt;/a&gt;
                  &lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
              &lt;/form&gt;
  </code></pre>
  <p>script.js -</p>
  <pre><code>window.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
      document.querySelector(&quot;.form&quot;).addEventListener(&quot;submit&quot;, function(e) {
          const username = this.username.value;
          const password = this.password.value;
           if(username.length &gt; 4 &amp;&amp; password.length &gt; 4){
            this.action = &quot;landing.html&quot;;
            } else {
            e.preventDefault();
            alert(&quot;Invalid credentials&quot;);
            }
      })
  })
  </code></pre>
  <p>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.</p>