jQuery progressbar: progress based on user input w

Question

I am trying to implement a jQuery progressbar where the user determines the progress (by typing into a text form), but if the user were to leave the page and then come back to it, the progressbar wouldn't be back at 0 again; it would be wherever they left off from before. Trying to figure out how to save their progress....

<form method="post" action="">
  <input id="first-value" type="text" name="first" value="" /><br />
  <input type="text" name="second" value="" />         
</form> 

---

<script>
 $(function() {
  $( "#progressbar" ).progressbar({
    value: 0  //set to zero for now, but want it to change permanently when user    
             // inputs data
      });
});
</script>

---

<script>
   $('input').change(function(){
    var new_amount = 0
    $('input').each(function() {

      if($(this).val() == "50") {
             new_amount += 5;   //5 Percent
      }
      if($(this).val() == "100") {
             new_amount += 10;  //10 Percent
       }
     }
   );

$("#progressbar").progressbar('value',new_amount);

});
</script>

I want to take the values the user inputs (i.e. say, 100, 30, 80, etc.), add them up, make that amount the progressbar value, but keep it at that value even if they were to close the browser and come back to that page again.

Answer 1

Generally, a cookie can be an effective way to store that information across pages/refreshes/back/forward/etc within the same site. It needs to be used judiciously though, and you should be careful of cases where the site seems to "cache" the cookie due to issues in your javascript code.

See W3c for a complete rundown on what they are and how to use them:

http://www.w3schools.com/js/js_cookies.asp

You could also store a session server side if that is more appealing. If that is the case, please let us know what server side technology you are using. (.NET, PHP, Java, Node.js, etc)