title: How to create and store value of the progress bars in local storage
body: <p>First,I have a textarea for tasks and an add button. When the button is clicked it will be stored in the database.All I want to do is to output the task with a progress bar and buttons for increment and decrement.</p>
  
  <p>Does anyone know about bootstrap progress bar?</p>
  
  <ul>
  <li>The progress bar must be incremented and decremented.</li>
  <li>and the last value must be the latest value of it when a user came back to that progress bar.</li>
  </ul>
  
  <p>I think jquery and javascript is the best solution for this. But I do not know how :( Can someone please help.</p>
  
  <p>heres the code for the output:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;
          Customize Bootstrap progressbar
      &lt;/title&gt;
      &lt;link href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;/head&gt;
  &lt;body style="margin-top: 100px"&gt;
      &lt;div class=" col-sm-6 col-sm-offset-3"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;
                      Customize Bootstrap progressbar
                  &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body" style="padding-top: 50px"&gt;
                  &lt;div class="progress"&gt;
                      &lt;div class="progress-bar" role="progressbar" aria-valuenow="0 %" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="panel-footer"&gt;
                  &lt;div class="btn-group" role="group" aria-label="..."&gt;
                      &lt;button type="button" class="btn btn-default" onclick="progress.increment(10)"&gt;
                          Increment
                      &lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" onclick="progress.decrement(10)"&gt;
                          Decrement
                      &lt;/button&gt;
                      &lt;button type="button"  class="btn btn-default"onclick="progress.reset()"&gt;
                          Reset
                      &lt;/button&gt;
                      &lt;button type="button"  class="btn btn-default"onclick="progress.complete()"&gt;
                          Complete
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="jquery/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script&gt;
      var progress = (function ($) {
          var progress = $('.progress'),
              progress_bar = $('.progress-bar'),
              total_width = progress.width();
          function calculatePercentage(increment_by,is_increment) {
              var progress_percentage;
              if (is_increment == true) {
                  progress_percentage = Math.round((progress_bar.width() / total_width) * 100 + increment_by) ;
                  progress_percentage = (progress_percentage &gt; 100) ? 100 : progress_percentage;
              } else {
                  progress_percentage = Math.round((progress_bar.width() / total_width) * 100 - increment_by) ;
                  progress_percentage = (progress_percentage &lt; 0) ? 0 : progress_percentage;
              }
              return progress_percentage;
          }
          return{
              increment: function (increment_by) {
                  var progress_percentage = calculatePercentage(increment_by, true);
                  progress_bar.css('width',progress_percentage + '%').attr('aria-valuenow', progress_percentage + ' %');
              },
              decrement: function (decrement_by) {
                  var progress_percentage = calculatePercentage(decrement_by, false);
                  progress_bar.css('width',progress_percentage+'%').attr('aria-valuenow', progress_percentage + ' %');
              },
              reset: function () {
                  progress_bar.css('width',0 + '%').attr('aria-valuenow', 0 + ' %');
              },
              complete: function () {
                  progress_bar.css('width',100 + '%').attr('aria-valuenow', 100 + ' %');
              }
          };
      })( jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/2XlFH.png" rel="nofollow noreferrer">enter image description here</a></p>