jQuery progressbar:基于保存值的用户输入的进度 [英] jQuery progressbar: progress based on user input where values get saved

问题描述

我正在尝试实现一个jQuery进度条，用户可以在其中确定进度(通过输入文本形式)，但是如果用户要离开页面然后返回页面，则进度条不会返回到再次为0；那将是他们离开以前的任何地方.试图弄清楚如何保存他们的进度....

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>

我想获取用户输入的值(例如100、30、80等)，将它们加起来，使该值成为进度条值，但是即使他们要关闭该值也要使其保持该值.浏览器，然后再次返回该页面.

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.

推荐答案

通常，Cookie是在同一站点中跨页面/刷新/后退/转发/等存储该信息的有效方法.不过，必须谨慎使用它，并且在某些情况下，由于JavaScript代码中的问题，该网站似乎缓存"了cookie，因此您应格外小心.

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.

有关它们是什么以及如何使用它们的完整摘要，请参见W3c:

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

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

如果更吸引人，您还可以存储会话服务器端.如果是这种情况，请让我们知道您正在使用哪种服务器端技术. (.NET，PHP，Java，Node.js等)

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)

这篇关于jQuery progressbar:基于保存值的用户输入的进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！