Question

我注意到在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>

Answer 1

我认为sessionStorage对于此问题是理想的，因为localStorage并且Cookie会在会话中保留这些值，这可能不是您想要的。

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

Answer 3

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

document.cookie = "field=value";

Answer 4

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

Remember text box value using jQuery cookies

Answer 5

Firefox本身对此提供了答案，代码以及链接中的所有内容：

Session Storage

该示例以Javascript给出

防止输入值在刷新时重置

5 个答案: