How to Prevent Browser to Re-Set Inputs on Page Refresh

Prevent input value from resetting on refresh

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

Browser refresh behaviour

<input autocomplete="off">

Preventing Firefox from remembering the input value on refresh with a meta tag

For an input tag there's the attribute autocomplete you can set:

<input type="text" autocomplete="off" />

You can use autocomplete for a form too.

How do I stop timer reset after page refresh

You need localStorage or cookies to store data and use even after page reload.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

UPDATE

After updated question, here is how you need to store and get counter variable from localStorage

when you declared counter variable:

var counter = localStorage.getItem("counter");
counter = counter ? counter : 5 ;  // if in store then that value otherwise 5 as default

You can detect page reload/refresh using javascript onbeforeunload event and same time store the counter value for next use.

 window.onbeforeunload = function() {
     localStorage.setItem("counter", counter);
 };

UPDATE-2

Here is a working fiddle that you can use:

https://jsfiddle.net/wdar3yuq/

clear input fields on page refresh (Microsoft Edge)

First, thanks for the responses.

I had tried autocomplete='off' (sorry I forgot to mention that), but it didn't seem to work.

Just before checking here for replies, though, I decided to try one other experiment. I added a button to my page which, when clicked, would call a function containing the JavaScript .value = '' statement.

For whatever reason, that worked just fine; it emptied the value and cleared the field, which got me thinking that tying the "reset" to a specific HTML event might be the key. I tried a couple of things that didn't work, but finally I just replaced this:

document.getElementById('input_field').value = '';

. . . with this:

window.onload = function() {
  document.getElementById('input_field').value = '';
  }

. . . and that did it. Every time I refresh the page in either Firefox or Edge, the value is emptied and the field is cleared.

I'm not sure why that worked (like I said, I'm just getting started with this stuff), but there it is.

---

Related Topics