Saving html state with javascript

Question

I found some things so far but still isnt what I need. I have a html page that has a select input with names. I need to be able to select a name in that input and save the html in such a way that when I open the page again the last selected name is still selected. I can only use pure javascript.

That's what i have now. Works on chrome but doesnt work on IE.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>

    <p>Finalizado por:</p>
    <div id="demo" style="float:left; margin-right: 10px;"></div>
    <select id="mySelect" style="width: 25px; float:left;">
        <option></option>
        <option value="Sérgio Barros">Sérgio Barros</option>
        <option value="Marcos Evangelista">Marcos Evangelista</option>
        <option value="Antônio Sobral">Antônio Sobral</option>
        <option value="Marcelo Cancio">Marcelo Cancio</option>
        <option value="Fabio">Fabio</option>
        <option value="Ganso">Ganso</option>
        <option value="Eduardo">Eduardo</option>
        <option value="Rogério">Rogério</option>
        <option value="Mastropirro">Mastropirro</option>
        <option value="Marcelo Celebrity">Marcelo Celebrity</option>
    </select>
    <br/>
    <br/>

    <div id="demo2" style="float:left; margin-right: 10px;"></div>
    <select id="mySelect2" style="width: 25px; float:left">
        <option></option>
        <option value="Sérgio Barros">Sérgio Barros</option>
        <option value="Marcos Evangelista">Marcos Evangelista</option>
        <option value="Antônio Sobral">Antônio Sobral</option>
        <option value="Marcelo Cancio">Marcelo Cancio</option>
        <option value="Fabio">Fabio</option>
        <option value="Ganso">Ganso</option>
        <option value="Eduardo">Eduardo</option>
        <option value="Rogério">Rogério</option>
        <option value="Mastropirro">Mastropirro</option>
        <option value="Marcelo Celebrity">Marcelo Celebrity</option>
    </select>
    <br/>
    <br/>

    <script>
        function myFunction() {
            var x = document.getElementById("mySelect").value;
            document.getElementById("demo").innerHTML = x;
        }

        function myFunction2() {
            var x = document.getElementById("mySelect2").value;
            document.getElementById("demo2").innerHTML = x;
        }
    </script>
</body>

</html>

possible duplicate of Global Variable usage on page reload

AGE
– AGE

2015-06-18 23:34:01 +00:00
Commented Jun 18, 2015 at 23:34 — AGE
– AGE, Commented Jun 18, 2015 at 23:34

Jonathan · Accepted Answer · 2015-06-18 23:12:06Z

1

HTML is stateless. This means that every time a page is loaded, it's as though it is being loaded for the first time. If you want your form to "remember" things, you need to save them somewhere. Typically this is done on the server in a database or session, or it can be done on the client via cookies or local storage.

answered Jun 18, 2015 at 23:12

Jonathan

5,0292 gold badges23 silver badges39 bronze badges

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

Comments

timeiscoffee · Accepted Answer · 2015-06-18 23:10:32Z

0

You can use local storage to save the selected value and reload and set it to the dropdown on pageload.

answered Jun 18, 2015 at 23:10

timeiscoffee

4583 silver badges14 bronze badges

Collectives™ on Stack Overflow

Saving html state with javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related