Karthika Ram Karthika Ram - 7 months ago 41
Javascript Question

How to restore javascript value from localstorage?

code :

Test2 =<input type="text" id="idfield1" name="test2">
<br/> Test3 =<input type="text" id="idfield2" name="test3">
<script>
$('#idfield1').keypress(function() {
document.getElementById('idfield2').value='text to be displayed' ;
});
(function(window, document, undefined) {
function changeSelect(event) {
if (event.target.type == 'checkbox' || event.target.type == 'radio') {
window.localStorage.setItem(event.target.id, event.target.checked ? 'checked' : 'unchecked');
} else {
window.localStorage.setItem(event.target.id, event.target.value);
}
}

function load(event) {
var i = 0,
k, e;
while (i < window.localStorage.length) {
k = window.localStorage.key(i++);
e = document.getElementById(k);
if (e) {
if (e.type == 'checkbox' || e.type == 'radio') {
e.checked = window.localStorage.getItem(k) == 'checked';
} else {
e.value = window.localStorage.getItem(k);
}
}
}
}

function clearData(event) {
window.localStorage.clear();
}
window.addEventListener('load', load, true);
window.addEventListener('change', changeSelect, true);
window.addEventListener('select', changeSelect, true);
window.addEventListener('keyup', changeSelect, true);
window.addEventListener('click', changeSelect, true);
window.addEventListener('submit', clearData, true);
})(window, document)
</script>


http://jsfiddle.net/kxc156ox/6/

I want to restore values of input when ever browser is accidentally closed or reloaded .

Multiple values coming form javscript based on user input.If user accidentally closed page ,due to internet his page was reloaded in the sense all values should restore from localstorage.

when you reload text3 values is not coming .text2 value is coming

Please help me to get the value in any way .I am working on this form a long long time .Any help would be very useful.

Thanks in advance .

Answer

I think below fiddle link will solve you issue.

Check it.

            $('#idfield1').keypress(function(evt) {
      document.getElementById('idfield2').value=evt.currentTarget.value ; 
    });
    (function(window, document, undefined) {
      function changeSelect(event) {
        var elements = document.getElementsByTagName("input");
        //For query selection use below code
        //var element = document.querySelectorAll("input[type=text]");
        for(var index=0; index<elements.length; index++){
            if (elements[index].type == 'checkbox' || elements[index].type == 'radio') {
            window.localStorage.setItem(elements[index].id, elements[index].checked ? 'checked' : 'unchecked');
          } else {
            window.localStorage.setItem(elements[index].id, elements[index].value);
          }
        }
      }

      function load(event) {
        var i = 0,
          k, e;
        while (i < window.localStorage.length) {
          k = window.localStorage.key(i++);
          e = document.getElementById(k);
          if (e) {
            if (e.type == 'checkbox' || e.type == 'radio') {
              e.checked = window.localStorage.getItem(k) == 'checked';
            } else {
              e.value = window.localStorage.getItem(k);
            }
          }
        }
      }

      function clearData(event) {
        window.localStorage.clear();
      }
      window.addEventListener('load', load, true);
      window.addEventListener('change', changeSelect, true);
      window.addEventListener('select', changeSelect, true);
      window.addEventListener('keyup', changeSelect, true);
      window.addEventListener('click', changeSelect, true);
      window.addEventListener('submit', clearData, true);
    })(window, document)