LocalStorage - Js

Hey,

I complete the survey project, but I wanted to add an option.
Save the form data.
So I tried to use localstorage, I succeed to save my data but it won’t come back when I F5 my form.

Why ?

Here is the bootstrap code :

    <div class="form-row" id="survey-form">
        <div class="form-group col-md-4 text-white">
          <label id="name-label" for="name">Nom</label>
          <input
            type="text"
            class="form-control bg-dark text-white"
            id="name"
            placeholder="Nom"
          />
        </div>
        <div class="form-group col-md-4 text-white">
          <label id="email-label" for="email">Email</label>
          <input
            type="email"
            class="form-control bg-dark text-white"
            id="email"
            placeholder="Email"
            required="email"
          />
        </div>
        <div class="form-group col-md-4 text-white">
          <label id="number-label" for="age"> Age</label>
          <input
            type="number"
            class="form-control bg-dark text-white"
            id="number"
            min="10"
            max="100"
            placeholder="Age"
            required
          />
        </div>
      </div>


<div class="text-right">
        <button
          type="submit"
          id="submit"
          class="btn btn-primary mb-3 "
        >
          Envoyer
        </button>
        <div class="text-right">
          <button
            type="submit"
            id="recup"
            class="btn btn-primary mb-3"
          >
            Récupérer
          </button>

Here is the JS code.

 document.getElementById("submit").onclick = function() {
        if (typeof localStorage != "undefined" && JSON) {
          var coordonnees = {
            name: document.getElementById("name").value,
            email: document.getElementById("email").value,
            age: document.getElementById("number").value
          };
          localStorage.setItem("coord", JSON.stringify(coordonnees));
          alert("Mémorisation effectuée");
        } else alert("localStorage n'est pas supporté");
      };
      // Méthode de lecture
      document.getElementById("recup").onclick = function() {
        if (typeof localStorage != "undefined" && JSON) {
          var coordonnees = JSON.parse(localStorage.getItem("coord"));
          document.getElementById("name").value = coordonnees.name;
          document.getElementById("email").value = coordonnees.email;
          document.getElementById("number").value = coordonnees.number;
          alert("Lecture effectuée");
        } else alert("localStorage n'est pas supporté");
      };

Because you are not loading it on page refresh, only when clicking the button. Also, you have coordonnees.number when loading the data. It should be coordonnees.age.

You can do something like this, if you create the function instead of having it as an anonymous function.

if (performance.navigation.type === 1) {
  getFromLocalStorage();
}

It will only work in Debug mode on Codepen (Change view > Debug mode).

I’m sure there are other ways of detecting a refresh and technically performance.navigation is deprecated. But the other way of doing it is pretty verbos and the browser support likely is not as good.

if (window.performance.getEntriesByType("navigation")[0].type === 'reload') {
  getFromLocalStorage();
}

Unfortunately, it does not work…
Thanks for age / number, didn’t see.

Show your updated code. It really isn’t helpful that you just say “does not work”. Make a Codepen or something and share your code.

Edit: pen deleted

BTW, if you use the reply button below a user’s post or use @someUserName to direct your post to a user they will get a notification when you post something they should read.

@lasjorg that’s true my bad.

Here is the code pen

You can’t put it inside the click handler. Then it only runs when you click the button.

Move the if statement out so it runs every time all the code runs.

Edit: getFromLocalStorage is not a function that exists in your code. That is why I said to make a function and not use the anonymous function.

You also have errors in your code. Make sure you open and close code blocks correctly.

Here it is with the new code you posted. It obviously only works for the three inputs you are saving/loading.

Edit: pen deleted

Yes I know, It was on purpose that it only works for three inputs.
Ok, with your code, it works perfectly, thanks you.
Now I have to understand it.

  1. How the debugger works ?
  2. Where does “performance.navigation.type”, from the DOM I suppose but how did you find it ?

Except those couple of things, the other part of the code is quiet understandable.

I really appreciate your help, thanks you.

  1. The debug view is just a Codepen thing. You have to use it for certain things to get the page to behave as a normal web page would.

  2. It is a Web API and I found it by searching for it. Like you do for most things you don’t already know about. Get used to it now because it is unavoidable.

Let me know when you are done with my Codepen (you can fork it) and I will delete it.

Yeah I am already doing it, but its better to know where to look before doing some research.

Anyway, I am done with your codepen. Thanks you !

Google and MDN is pretty much all you need.

Anyway, glad to have helped. Happy coding!