防止输入值在刷新时重置答案

【问题标题】：Prevent input value from resetting on refresh防止输入值在刷新时重置
【发布时间】：2014-07-16 05:31:06
【问题描述】：

我注意到，在 Firefox 中，输入元素在页面重置时保持其值，但在 Safari 中则不然。有没有办法维护用户在 JavaScript（非 PHP）中输入的值。

我已经尝试过相当广泛的谷歌搜索，但每个结果似乎都认为这种行为是不可取的。

编辑：不知道我做错了什么，这是我尝试过的：

<input id="myInput" type="text">
<script>
    var myInput = document.getElementById("myInput");

    if (sessionStorage.getItem("autosave"))
        myInput.value = sessionStorage.getItem("autosave");

    myInput.addEventListener("change", function() {
        sessionStorage.setItem("autosave", myInput.value);
    });
</script>

编辑（再次）：成功了，谢谢：

<input id="myInput" type="text">
<script>
    var myInput = document.getElementById("myInput");

    window.onload = function() {
        if (sessionStorage.getItem("autosave"))
            myInput.value = sessionStorage.getItem("autosave");
    }

    myInput.addEventListener("keyup", function() {
        sessionStorage.setItem("autosave", myInput.value);
    });
</script>

【问题讨论】：

您可以在输入更改时将值保存到本地存储，并在提交时清除。然后，在加载页面时，检查 localstorage 值并填充表单。
这是浏览器功能，即使在 Firefox 中，如果您通过单击 CTRL+F5 进行“硬刷新”，输入元素也会被重置。

标签： javascript html input

【解决方案1】：

我认为sessionStorage 是理想的选择，因为localStorage 和cookie 会在会话中保留这些值，这可能不是您想要的。

【讨论】：

不错。我不知道那个选项。 :-) 似乎所有现代浏览器都支持caniuse.com/namevalue-storage
是的，可能是最好的解决方案。（顺便说一句，Cookies也可以删除/设置为过期，但需要做更多的事情。）

【解决方案2】：

<input id="persistent_text_field" value=""/>

在您的JS 中假设您使用的是jQuery

$(document).on('ready',function(){
    if(sessionStorage.getItem('last_entry')){
        $("#persistent_text_field").val(sessionStorage.getItem('last_entry'));
    }

    $("#persistent_text_field").on("keypress",function(){
        sessionStorage.setItem('last_entry',$(this).val());
    });
});

编辑：非 jQuery 解决方案？简单:)

<input id="persistent_text_field" value="" onkeypress="setStorage(this)"/>

在您的 JavaScript 文件中，在您的文档加载事件处理函数中调用 customReset();。

function customReset(){
    if(sessionStorage.getItem('last_entry')){
        var element = document.getElementById("presistent_text_field");
        element.value = sessionStorage.getItem('last_entry');
    }
}

function setStorage(element){
    sessionStorage.setItem('last_entry',element.value);
}

【讨论】：

谢谢，但我更喜欢非 jQuery 解决方案

【解决方案3】：

这是一种浏览器行为，但如果您不想使用 PHP，可以尝试使用 cookie 覆盖它以记住条目。

document.cookie = "field=value";

【讨论】：

我不知道如何使用这个，你能举个例子吗？我根据另一个答案更新了我的问题以显示一些最小的 HTML 和 JavaScript

【解决方案4】：

您需要将值存储在 cookie 或本地存储中。

Remember text box value using jQuery cookies

【讨论】：

谢谢，但我更喜欢非 jQuery 解决方案

【解决方案5】：

Firefox 本身在链接中给出了答案，代码和所有内容：

Session Storage

例子是用Javascript给出的

【讨论】：