Prevent input value from resetting on refresh

Question

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.

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

Edit (again): Got it working, thank you:

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

You could save values to localstorage on input change, and clear on submit. Then, when loading the page, you check for localstorage values and populate the form. — Etai
– Etai, Commented Jul 16, 2014 at 5:36
This is browser feature , even in Firefox input elements will get reset if you do "hard-refresh" by clicking CTRL+F5. — Silz
– Silz, Commented Jul 16, 2014 at 5:37

Chirag Bhatia - chirag64 · Accepted Answer · 2014-07-16 05:38:33Z

5

I think sessionStorage would be ideal for this since localStorage and cookies would persist the values across sessions which is probably not what you would want.

answered Jul 16, 2014 at 5:38

Chirag Bhatia - chirag64

4,5303 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maksym Kozlenko Over a year ago

Nice. I didn't know about that option. :-) It seems to be supported by all modern browsers caniuse.com/namevalue-storage

Clément Malet Over a year ago

Yes, probably the best solution. (Cookies can be deleted / set to expire too by the way, but it requires to do more.)

AdityaParab · Accepted Answer · 2014-07-16 05:59:43Z

2

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

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

EDIT: Non jQuery Solution? Simple :)

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

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

edited Jul 16, 2014 at 5:59

answered Jul 16, 2014 at 5:44

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

1 Comment

asimes Over a year ago

Thank you but I would prefer a non jQuery solution

Clément Malet · Accepted Answer · 2014-07-16 05:36:15Z

0

It is a browser behavior, but you can try to override it using cookies to remember entries, if you do not want to use PHP.

document.cookie = "field=value";

answered Jul 16, 2014 at 5:36

Clément Malet

5,0903 gold badges32 silver badges48 bronze badges

1 Comment

asimes Over a year ago

I am not sure how to make use of this, could you make an example? I updated my question to show some minimal HTML and JavaScript based on another answer

Community · Accepted Answer · 2017-05-23 12:30:17Z

0

You need to store value in cookie or in local storage.

Remember text box value using jQuery cookies

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jul 16, 2014 at 5:36

Maksym Kozlenko

10.4k2 gold badges69 silver badges55 bronze badges

1 Comment

asimes Over a year ago

Thank you but I would prefer a non jQuery solution

FilT · Accepted Answer · 2020-02-10 23:34:31Z

0

Firefox itself gives an answer to this, code and all in the link:

Session Storage

The example is given in Javascript

answered Feb 10, 2020 at 23:34

FilT

3401 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Prevent input value from resetting on refresh

5 Answers 5

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related