javascript - localStorage不存储更新的值

我正在编写一个脚本，以使用户知道刷新页面之前花了多少时间。为此，我使用setInterval函数增加了一个计时器，并通过localStorage将数据存储在浏览器中。页面刷新后，我将检索存储的数据并显示它们。同时，计时器返回到0，然后再次开始递增。

不幸的是，我的脚本出了点问题，因为localStorage不存储更新的时间值（始终为-1）。我的脚本怎么了？

//TimeSpent = -1, so setInterval sets it to 0s instead of 1s when the page opens.
var timeSpent = -1

//Update time every second
var timer = setInterval(()=>{
    timeSpent +=1;
    }, 1000);

//If first visit, ask to refresh. Else, display timeSpent on previous page by retrieving localStorage data.
function start(){
  if (localStorage.timeData){
  var timerJson = localStorage.getItem("timeData");
  var timerParsed = JSON.parse(timerJson);
  console.log(`You spent ${timerParsed.time} seconds on previous page`)
  }
  else{
  console.log("Reload the page and see how much time you spent reading this.")
  }
}

//Trig function when page opens.
window.onload = start();

//Before page reloads, store timeSpent in localStorage as a Json file.
   var timeData = {
   time: timeSpent,
   }

  function storeData (timeData){
  var timerJson = JSON.stringify(timeData)
  localStorage.setItem("timeData", timerJson);
  }

window.onbeforeunload = storeData (timeData)

谢谢！

最佳答案

window.onbeforeunload必须具有类型function的值，但是在您的代码中它是undefined。因此，您应该将其更改为：

window.onbeforeunload = function storeData (){
  var timerJson = JSON.stringify(timeData)
  localStorage.setItem("timeData", timerJson);
  }

我还从函数中删除了参数，使其成为闭包。

UPD。正如Jonas Wilms所指出的，您应该执行相同的onload事件和start函数。

也。为了始终获得timeSpent的实际（新）值，您应该这样做：

const state = {timeSpent: -1}

到处都用timeSpent替换state.timeSpent。

这样，闭包将具有指向state对象的链接，而不仅仅是获取原始timeSpent的初始值。