CODEWITHSUNDEEP
javascripthtmljsonlocal-storage
Zain
Zain

Reputation: 93

Local Storage isn't storing the value in input field on refresh

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="[email protected]"
      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));
});

Upvotes: 1

Views: 996

Answers (2)

MOHD SHAHZAIB
MOHD SHAHZAIB

Reputation: 540

First of all, you are extracting value in the wrong way. it should be like this.

const storedUserDetails = JSON.parse(localStorage.getItem('userDetails'));

And for populating the value after the refresh, As long as I know you will have to use IIFE (Immediately Invoked Function Expression) because the input event will not trigger until the user starts typing or changing something in the input.

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

(() => {
  const storedUserDetails = JSON.parse(localStorage.getItem('userDetails'));
    const {name}= storedUserDetails
  
  if(name) {
     storeName.value = name
  }
})()

storeName.addEventListener('input', (e) => {
  userDetails.name = e.target.value;
  console.log(userDetails.name);
  localStorage.setItem('userDetails', JSON.stringify(userDetails));
});
<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="[email protected]"
      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>

Upvotes: 1

Tamas Szoke
Tamas Szoke

Reputation: 5542

You have set the userDetails key in localStorage, so you have to read that value.

Example

localStorage.getItem('userDetails')

Then you can parse the value you got.

With your code

storeName.value = JSON.parse(localStorage.getItem('userDetails'))

You can do the same on page load to get the saved input data.

More information

Documentation setItem() getItem()

Upvotes: 3

Related Questions