Question

I have a simple web mobile app that is calculating values in given fields. I’ve been trying to save the values on the local host in the browser and haven’t had any luck. I am using jQuery to save the values, but somehow it doesn’t work.

     <script>
    $(document).ready(function() {
$('#field_wc').val(localStorage.getItem('wc') );
$('#field_tax').val(localStorage.getItem('tax') );
$('#field_sui').val( localStorage.getItem('sui') );
$('#field_o').val( localStorage.getItem('o') );
$('#field_fp').val( localStorage.getItem('fp') );
$('#field_misc').val( localStorage.getItem('misc') );
$('#field_t').val( localStorage.getItem('t') );


    });

    $('#field_tax').keyup(function() {
$('#field_wc').val( localStorage.setItem('wc') );
$('#field_tax').val( localStorage.setItem('tax') );
$('#field_sui').val( localStorage.setItem('sui') );
$('#field_o').val( localStorage.setItem('o') );
$('#field_fp').val( localStorage.setItem('fp') );
$('#field_misc').val( localStorage.setItem('misc') );
$('#field_t').val( localStorage.setItem('t') );


    });
    </script>

Answer 1

$(document).ready(function() { 
  var
    key,
    fields = ['wc', 'tax', 'sui', 'o', 'fp', 'misc', 't'];

  for(key in fields) { 
    (function (){
      var
        name = fields[key],
        field = $('#field_' + name)
          .val(localStorage.getItem(name) || '')
          .on('keyup', function() {
            localStorage.setItem(name, field.val());
          });
    }());
  }
});

Hi! I optimized your script and fixed a few other problems with it: http://jsfiddle.net/q78d8/4/

• Using locally scoped variables to store the jQuery objects in is the biggest performance improvement. In your original script you made jQuery create those over and over again, for every keyup event fired
• I think you wanted to bind each input to the “Save” function, but realize, you don’t have to update values which haven’t changed! If the user updated #field_tax, only save that value
• Remember you can Chain jQuery methods
• I used a little trick here, where I know that the return value of each chain, would still be the jQuery object I originally selected, so I could store the object in the same line in which I assigned a keyup handler on it & filled the value with what was in the localstorage
• I wrapped the whole thing in a for loop, and an self-invoking function, to create an easy-to-do-maintenance-on script

Edit —
I left out that you used setItem incorrectly, since others already told you.