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](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload) — AGE, Jun 18 '15 at 23:34

score 1 · Answer 1 · answered Jun 18 '15 at 23:12

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.

score 0 · Answer 2 · answered Jun 18 '15 at 23:10

0

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

answered Jun 18 '15 at 23:10

timeiscoffee

468
3
14

Saving html state with javascript

2 Answers2