jQuery进度条：基于保存值的用户输入的进度

Question

我正在尝试实现一个 jQuery 进度条，用户可以在其中确定进度（通过键入文本表单），但是如果用户离开页面然后返回到该页面，进度条将不会返回又是0；这将是他们之前离开的地方。试图弄清楚如何保存他们的进度....

<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>

我想获取用户输入的值（例如，100、30、80 等），将它们相加，将该数量设为进度条值，但即使他们要关闭浏览器并再次返回该页面。

Answer 1

一般来说，cookie 是一种在同一站点内跨页面/刷新/返回/转发/等存储信息的有效方式。但是，需要谨慎使用它，并且您应该小心由于您的 javascript 代码中的问题，网站似乎“缓存”了 cookie 的情况。

有关它们是什么以及如何使用它们的完整概要，请参阅 W3c：

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

如果这样更有吸引力，您还可以存储会话服务器端。如果是这种情况，请告诉我们您使用的是什么服务器端技术。 （.NET、PHP、Java、Node.js 等）