Save value in reload page javascript

Question

I want to save data in the input when the page reloading and I don't know why my code doesn't work. This is my html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
        <label>nom:</label> <input type="text" value=""/></br>
        <label>prenom:</label><input type="text" value=""/>
        <script type="text/javascript">
        window.onbeforeunload = function(){
        localStorage.setItem(nom, document.getElementsByTagName('input')[0].value);
        localStorage.setItem(prenom, document.getElementsByTagName('input')[1].value);
            }
    document.addEventListener("DOMContentLoaded",function(){
            var nom = localStorage.getItem(nom);
            var prnom = localStorage.getItem(prenom);
            if(nom!==null&&prenom!==null) {                 
            document.getElementsByTagName('input')[0].value = nom;
            document.getElementsByTagName('input')[1].value = prenom;
            }
        });

         </script>
</body>
</html>

Your code was setting the localStorage values when the page was loaded which means it set it to be no text so the code won't save. Use the code from the snippet. — Cameron
– Cameron, Commented May 2, 2017 at 0:39

Cameron · Accepted Answer · 2017-05-02 00:35:32Z

1

Make sure to use quotes for the variable name:

localStorage.setItem('nom', document.getElementsByTagName('input')[0].value);

Or you can use this which is simpler:

localStorage.nom = document.getElementsByTagName('input')[0].value;

Your code was setting the localStorage values when the page was loaded which means it set it to be no text so the code won't save.

Use the below code:

window.onbeforeunload = function() {
  var nom = localStorage.nom;
  var prnom = localStorage.prenom;
  if (nom !== null && prenom !== null) {
    document.getElementsByTagName('input')[0].value = nom;
    document.getElementsByTagName('input')[1].value = prenom;
  }
};

<label>nom:</label> <input type="text" onchange="localStorage.nom = document.getElementsByTagName('input')[0].value" /></br>
<label>prenom:</label><input type="text" onchange=" localStorage.prenom = document.getElementsByTagName('input')[1].value" />

IMPORTANT: use the code on your computer because localStorage doesn't work on stack overflow snippets

edited May 2, 2017 at 0:35

answered May 2, 2017 at 0:27

Cameron

1,05712 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mouhamed slaimi Over a year ago

i try it now and this solution doesn't solve the problem :/

Cameron Over a year ago

Your code was setting the localStorage values when the page was loaded which means it set it to be no text so the code won't save. Use the code from the snippet.

mouhamed slaimi Over a year ago

thanx i try now and this fix my problem i set a default value in the input and reload and that s work good localStorage.nom = document.getElementsByTagName('input')[0].value;

Cameron Over a year ago

Put localStorage.nom = localStorage.nom || "" in the onbeforeunload function to set a default value if it is undefined.

mouhamed slaimi Over a year ago

ok that s good , i went to ask you if you have a solution using angularjs ?

Collectives™ on Stack Overflow

Save value in reload page javascript

1 Answer 1

Your code was setting the localStorage values when the page was loaded which means it set it to be no text so the code won't save.

Use the below code:

IMPORTANT: use the code on your computer because localStorage doesn't work on stack overflow snippets

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your code was setting the localStorage values when the page was loaded which means it set it to be no text so the code won't save.

Use the below code:

IMPORTANT: use the code on your computer because localStorage doesn't work on stack overflow snippets

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related