如何在JavaScript中计算LocalStorage存储日期与当前时间的分钟差

我看了你的代码，问题主要出在读取LocalStorage时的JSON解析顺序以及时间差的计算逻辑上，咱们一步步来修正：

问题分析 #

当你用JSON.stringify()把包含Date对象的testobj转成字符串存储时，Date对象会被自动序列化为ISO格式的字符串（比如你看到的"2018-05-24T17:36:06.471Z"），这本身是没问题的，但你读取时犯了一个顺序错误：

• 你先尝试直接从未解析的JSON字符串retreived里取refresh字段，这时候retreived是字符串，retreived['refresh']会返回undefined，导致new Date(undefined)创建出一个无效的日期对象，自然没法计算时间差。

修正步骤 #

1. 读取时先解析JSON字符串 #

必须先调用JSON.parse()把LocalStorage里的字符串转成JS对象，再从中取出日期字符串，然后转换成Date对象。

2. 正确计算分钟差 #

两个Date对象相减会得到它们之间的毫秒差，把这个差值转换成分钟只需要：(毫秒差) / 1000 / 60，你可以根据需求用Math.floor()取整或者toFixed()保留小数。

修正后的完整代码 #

存储页面的代码（无需改动，当前逻辑可行） #

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
  <input type="text" id="text">
  <button value="save" onClick="setStorage()" id="btn"> Save </button>
  <script>
    function setStorage(){
      var currentTime = new Date();
      var text = $("#text").val();
      var testobj = {'test' : 1, 'refresh' : currentTime};
      localStorage.setItem('storage', JSON.stringify(testobj));
    }
  </script>
</body>
</html>

另一个页面的setInterval代码（修正后） #

<script>
setInterval(function() {
  var date2 = new Date();
  // 1. 先读取并解析JSON字符串
  var retrievedStr = localStorage.getItem('storage');
  var retrievedObj = JSON.parse(retrievedStr);
  
  // 2. 用解析后的日期字符串创建有效的Date对象
  var date1 = new Date(retrievedObj.refresh);
  
  // 3. 计算分钟差
  var msDiff = date2 - date1;
  var minuteDiff = msDiff / (1000 * 60);
  // 可选：根据需求处理精度
  var roundedMinuteDiff = Math.floor(minuteDiff); // 向下取整得到整数分钟
  // var roundedMinuteDiff = minuteDiff.toFixed(2); // 保留两位小数
  
  console.log(`过去了${roundedMinuteDiff}分钟`);
  console.log(`精确差值：${minuteDiff}分钟`);
  
  $(".label").text(`存储的日期：${retrievedObj.refresh}，已过去${roundedMinuteDiff}分钟`);
}, 1000);
</script>

额外优化方案 #

如果你想简化逻辑，也可以在存储时直接存入时间戳（毫秒数），这样能避免日期字符串解析的步骤，兼容性更好：

// 存储时修改
function setStorage(){
  var currentTime = new Date();
  var text = $("#text").val();
  // 直接存时间戳数值
  var testobj = {'test' : 1, 'refresh' : currentTime.getTime()};
  localStorage.setItem('storage', JSON.stringify(testobj));
}

// 读取时计算
setInterval(function() {
  var date2 = new Date();
  var retrievedStr = localStorage.getItem('storage');
  var retrievedObj = JSON.parse(retrievedStr);
  // 直接用时间戳计算差值
  var msDiff = date2.getTime() - retrievedObj.refresh;
  var minuteDiff = msDiff / (1000 * 60);
  var roundedMinuteDiff = Math.floor(minuteDiff);
  
  console.log(`过去了${roundedMinuteDiff}分钟`);
}, 1000);

内容的提问来源于stack exchange，提问作者Wesley van Straalen