Keep input values unchange in browser without depending on browser

Question

Values entered by the user in <input/> are required to be kept unchanged after refreshing the page.

The browser dependency is expected be avoided in order to keep the cross browser compatibility.(For example: cookies, localStorage are not solution for this.) any one let me know how this can be achieved. JavaScript, Jquery can be used, but it should be browser compatible.

Well, what have you tried? The easiest way to do this would be to do it server side, but you can also use URL parameters or localstorage etecetera. — Asad Saeeduddin, Jan 10 '13 at 06:25
you can if you add a listener to changed even on the input (whether it is keypress/keydown/keyup/changed/etc...) and then invoking ajax to save the value on the server somewhere... — Darko, Jan 10 '13 at 06:26
@Asad, I tried to create hidden inputs and assign values with request Objects. — Débora, Jan 10 '13 at 06:27
@AashMaharoon Could you add the code for that to your question? — Asad Saeeduddin, Jan 10 '13 at 06:28
@Asad, the value is assigned by jQuery. when the user enters values, if values don't meet required valid data, then the page will be redirect to the same page. At that time, the user should see the values which he entered previously. URL rewriting doesn't suit me. — Débora, Jan 10 '13 at 07:34

score 2 · Answer 1 · answered Jan 10 '13 at 06:45

This should get you started. You can add text to the URL using the # sign in the URL without navigating away from the page. Then when reloading the page, you can pull the text back off of the URL.

HTML and Javascript Code:

Type something in the box below and then refresh the page:<br>
<input type="text" id="myTextBox" onkeyup="saveValue();">

<script type="text/javascript">
    var originalLocation = document.location.href;
    var myTextBox = document.getElementById('myTextBox');

    function saveValue(){
        document.location.href = originalLocation + "#" + myTextBox.value;
    }

    if(document.location.href.indexOf("#") > -1){
        myTextBox.value = document.location.href.split("#")[1];
    }
</script>

thanks for your reply. I need to keep th URL clean, so it won't not suit for my solution. any way Thank you very much. — Débora, Jan 10 '13 at 07:31

score 1 · Answer 2 · edited May 23 '17 at 12:15

Here is a quick demonstration using localStorage (which is available in all browsers except IE<=7) that relies on this basic plugin for serializing and restoring form values. Try refreshing the page after typing some information into the inputs:

HTML:

<form>
  <label for="name">Name:
    <input type="text" id="name" name="name" />
  </label>
  <br/>
  <label for="email">Email:
    <input type="text" id="email" name="email" />
  </label>
</form>

JS:

$(':input').on('input change keyup', function(){
  localStorage.formData = JSON.stringify($('form').values());
  console.log(localStorage.formData);
});
if(localStorage.formData){
  $('form').values(JSON.parse(localStorage.formData));
}

thank you very much. I can't use localStorage since it doesn't support older IE versions. In my Quesiton, I mentioned it. — Débora, Jan 10 '13 at 09:57

Keep input values unchange in browser without depending on browser

2 Answers2