使用 javascript 保存 html 状态答案

【问题标题】：Saving html state with javascript使用 javascript 保存 html 状态
【发布时间】：2015-06-18 23:01:38
【问题描述】：

到目前为止，我发现了一些东西，但仍然不是我需要的。我有一个带有名称的选择输入的 html 页面。我需要能够在该输入中选择一个名称并保存 html，以便当我再次打开页面时仍然选择最后选择的名称。我只能使用纯javascript。

这就是我现在所拥有的。可以在 chrome 上工作，但不能在 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>

【问题讨论】：

Global Variable usage on page reload的可能重复

标签： javascript html save

【解决方案1】：

HTML 是无状态的。这意味着每次加载页面时，就好像它是第一次加载一样。如果你想让你的表单“记住”一些东西，你需要把它们保存在某个地方。通常这是在服务器上的数据库或会话中完成，或者可以通过 cookie 或本地存储在客户端上完成。

【讨论】：

【解决方案2】：

您可以使用local storage 保存选定的值并重新加载并将其设置为页面加载时的下拉菜单。

【讨论】：