防止刷新时重置输入值 [英] Prevent input value from resetting on refresh

问题描述

我注意到，在Firefox中，重置页面后，input元素将保持其值，而在Safari中则不会.有没有一种方法可以维护用户在JavaScript中输入的值(没有PHP).

I've noticed that in Firefox an input element maintains its value when the page is reset but not in Safari. Is there a way to maintain the values a user would have typed in JavaScript (no PHP).

我已经尝试了相当广泛的谷歌搜索，但是每个结果似乎都发现这种行为是不受欢迎的.

I've tried Googling this fairly extensively but every result seems to find this behavior undesirable.

编辑:不确定我在做什么错，这就是我尝试过的事情:

Not sure what I am doing wrong, this is what I tried:

<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>

推荐答案

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

在您的JS中，假设您正在使用jQuery

In your JS assuming you're using 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解决方案?很简单:)

Non jQuery Solution? Simple :)

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

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

In your JavaScript file call customReset(); in your document load event handler function.

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);
}

这篇关于防止刷新时重置输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！