I'm trying to save the value in the local storage of the web browser. For example: When I type something in a form input field and without submitting the form when I refresh the page. values should be there. but at this time, when I refresh the page, values disappear. Let me show you how I'm trying to do that.

```
<form class="form" action="https://formspree.io/f/meqvlgqr" method="POST">
    <input
      type="text"
      name="name"
      maxlength="30"
      placeholder="Full Name"
      required
      class="input"
    />
    <input
      type="email"
      name="email"
      placeholder="example@gmail.com"
      required
      class="input"
    />
    <textarea
      rows="4"
      cols="50"
      name="message"
      placeholder="Write your message here ..."
      required
      maxlength="500"
      class="input-textarea"
    ></textarea>
    <button type="submit" class="contact-button">Get It Touch</button>
  </form>

```

I'm trying storeName.value = localStorage.getItem for values to stay there but it's not working.

```
const storeName = document.querySelector('input[type=text]');
const storeEmail = document.querySelector('input[type=email]');
const storeMessage = document.querySelector('.input-textarea');
const userDetails = {};

storeName.addEventListener('input', (e) => {
  userDetails.name = e.target.value;
  console.log(userDetails.name);
  localStorage.setItem('userDetails', JSON.stringify(userDetails));
  storeName.value = localStorage.getItem(JSON.parse(userDetails));
});

```