Onclick change HTML5 localstorage value

Question

I'm using count down timer by this code. If the page refresh or reload the count should not be reset for that I'm using this from localstorage. If there any alternate solution for this means Please suggest me.

var hms = $(".div__time .total_time").text();
var a = hms.split(':');
var hrs_min_sec = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);

var time_hrs_min_sec = hrs_min_sec;
if (localStorage.getItem("counter")) {
  if (localStorage.getItem("counter") <= 0) {
    var value = time_hrs_min_sec;
  } else {
    var value = localStorage.getItem("counter");
  }
} else {
  var value = time_hrs_min_sec;
}

document.getElementById('overall_time').innerHTML = value;

var counter = function() {
  if (value <= 0) {
    localStorage.setItem("counter", time_hrs_min_sec);
  } else {
    value = parseInt(value) - 1;
    console.log(value);
    localStorage.setItem("counter", value);
  }
  document.getElementById('overall_time').innerHTML = value;


  if (value == 0) {
    // var redirect_url = "<?php echo site_url('home'); ?>";
    // window.location.href = redirect_url;
  }

  var hours = Math.floor(value / 3600);
  var minutes = Math.floor(value % 3600 / 60);
  var seconds = Math.floor(value % 3600 % 60);
  var red_time = hours + ' : ' + minutes + ' : ' + seconds;
  document.getElementById('overall_times').innerHTML = red_time;
};
var interval = setInterval(function() {
  counter();
}, 1000);

#overall_time {
  display: none;
}

.div__time,
.total_time,
#overall_times {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div__time">
  <div id="overall_time"></div>
  <div id="overall_times"></div> /
  <div class="total_time">
    00:00:10
  </div>
</div>
<button onclick="start_over_all_time(this);" id="over_all_time">Over All Time</button>

This one working fine.

When I click a button I need to reset the countdown value to 0. For example if countdown time counting from 10 to 0 if click a button at count 5. then the count has to be reset to 0. This point only not working for me.

I'm using this code for reset the localstorage value

function start_over_all_time(button) {
    var inputElemnets = '0';
    localStorage.setItem("value", inputElemnets);
    console.log(value);
}

Fiddle Link

Thanks in Advance.

Answer 1

Okay... To objective here is to make the countdown "set to zero" button working.

Since SO snippet do not allow localStorage, the working scrip is on CodePen.

The main issue was not having declared the value at global scope.
See explanations within the code.

// I removed the 3 lines below because that was the only use of jQuery afer all...
// And because the math is weird to read (and incorrect).

//var hms = $(".div__time .total_time").text();
//var a = hms.split(':');
//var hrs_min_sec = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);

// Replaced by this:
var hms = document.querySelector(".total_time").innerHTML;
var hms_arr = hms.split(":");
var time_hrs_min_sec = (hms_arr[0]*3600) + (hms_arr[1]*60) + hms_arr[2];

// Declare the "value" used in almost all functions at the global scope.    
var value;

if (localStorage.getItem("counter")) {
  if (localStorage.getItem("counter") <= 0) {
    value = time_hrs_min_sec;  // Removed the var
  } else {
    value = localStorage.getItem("counter");  // Removed the var
  }
} else {
  value = time_hrs_min_sec;  // Removed the var
}

document.getElementById('overall_time').innerHTML = value;

var counter = function() {
  if (value <= 0) {
    localStorage.setItem("counter", time_hrs_min_sec);
  } else {
    value = parseInt(value) - 1;
    console.log(value);
    localStorage.setItem("counter", value);
  }
  document.getElementById('overall_time').innerHTML = value;


  if (value == 0) {
    // var redirect_url = "<?php echo site_url('home'); ?>";
    // window.location.href = redirect_url;
  }

  var hours = Math.floor(value / 3600);
  var minutes = Math.floor(value % 3600 / 60);
  var seconds = Math.floor(value % 3600 % 60);
  var red_time = hours + ' : ' + minutes + ' : ' + seconds;
  document.getElementById('overall_times').innerHTML = red_time;
};
var interval = setInterval(function() {
  counter();
}, 1000);

// Use value here... Instead of inputElemnets
function start_over_all_time(button) {
  value = 0;
  localStorage.setItem("counter", value);
  console.log(value);
  // Be cool with the browser and stop the interval.
  setTimeout(function(){
    clearInterval(interval);
  },1000);
}

Now the set to zero button works... because you use the value variable everywhere. So as soon as you set it to zero, in start_over_all_time(), the next iteration of the interval will do the rest.

There is plenty other things to fix... But that was your question.

Answer 2

When it comes to caching user data, you have 2 options:

• HTML5 storage (no backend required) => LocalStorage or SessionStorage
• Cookies (backend required)

LocalStorage or SessionStorage

Instead of LocalStorage you could use SessionStorage. The difference is, that it lives only as long as the browser session is open, i.e. closing the browser will end the session and delete the storage.

It's up to you, which of the both you want to use. For more, check out this SO question.

Cookies

Cookies are primarily for reading server-side, local storage can only be read by the client-side.

If I understand you correctly, you only want to save some UI state rather than have the server/backend remember this state. In comparison to html5 storage, cookies are:

• smaller
• have an expiration date
• are harder to implement (as it requires a backend)

For more, check out this SO question.

Edit: Cookies can actually be set and read by js alone, thanks for correcting me @jon-p