Question

此代码正在使用倒数计时器。如果页面刷新或重新加载，则不应为此重置计数，因为我正在使用localstorage进行计数。如果有其他替代解决方法，请提出建议。

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>

这个很好用。

单击按钮时，我需要将倒计时值重置为0。例如，如果在5点单击一个按钮，则倒数时间从10计数到0，则必须将计数重置为0。为我工作。

我正在使用此代码重置本地存储值

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

local citations

谢谢。

Answer 1

好的...这里的目标是使倒数“设置为零”按钮起作用。

由于SO代码段不允许使用localStorage，因此工作清单位于CodePen上。

主要问题是尚未在全局范围内声明value。
请参阅代码中的说明。

// 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);
}

现在设置为零的按钮可以工作了……因为您到处都使用了value变量。因此，只要在start_over_all_time()中将其设置为零，间隔的下一次迭代就会完成其余的工作。

还有很多其他问题要解决...但这是你的问题。

Answer 2

在缓存用户数据时，您有2个选项：

HTML5存储（不需要后端）=> LocalStorage或SessionStorage
Cookie（需要后端）

LocalStorage或SessionStorage

您可以使用SessionStorage代替LocalStorage。区别在于，它仅在打开浏览器会话时才有效，即关闭浏览器将结束会话并删除存储。

由您决定，您要使用两者中的哪一个。有关更多信息，请查看this SO question。

饼干

Cookie主要用于读取服务器端，本地存储只能由客户端读取。

如果我对您的理解正确，那么您只想保存一些UI状态，而不希望服务器/后端记住此状态。与html5存储相比，Cookie是：

较小
有到期日期
~~难以实施（因为它需要后端）~~

有关更多信息，请查看this SO question。

编辑：Cookies实际上可以单独由js设置和读取，感谢您纠正我@ jon-p

Onclick更改HTML5本地存储值

2 个答案: