How to keep the stored data onto local storage after refresh?

Question

I'm working on a web app with Vanilla JS, CSS and HTML. In my app, I have an input field where you should write your name. When you submit the value, it should be stored and shown on the front page/settings. After refreshing the page the value disappears. Why?

window.save_data = function () {
  if (typeof (Storage) !== "undefined") {
    let input = document.getElementById('inputName').value;
    localStorage.setItem('name', input);
    document.getElementById('inputName').value = localStorage.getItem('name');
    let storedValue = localStorage.getItem("name");
    document.querySelector("#user-name").innerHTML = storedValue;
    console.log(storedValue);
    return storedValue;
  } else {
    alert("Sorry! No Web Storage support..")
  }
}

<input type='text' name="name" id="inputName" />
      <button onclick="save_data()" type="button">Save</button>

score 0 · Answer 1 · edited Sep 28 '21 at 08:28

0

To do this, please take a look and read about local storage ....

edited Sep 28 '21 at 08:28

Azzabi Haythem

2,318
7
26
32

answered Sep 28 '21 at 07:54

Chris Adams

1,376
1
8
15

I didn't know about it, thank you! – Marcel Sep 28 '21 at 07:57
I tried to store it onto the local storage but the inputed value clears on refresh, what should I do? – Marcel Sep 28 '21 at 09:40
When your page loads, you should have a look in Local Storage for the value you saved earlier. If one exists, use that. If not, let the user submit one. – Chris Adams Sep 28 '21 at 10:29

score 0 · Answer 2 · answered Sep 28 '21 at 07:55

0

Local Storgae is what you can use of for your scenario.

answered Sep 28 '21 at 07:55

rajabraza

333
3
11

How to keep the stored data onto local storage after refresh?

2 Answers2