localStorage не хранит обновленное значение

Question

Я пишу скрипт, который позволяет пользователю узнать, сколько времени он провел на странице, прежде чем обновлять ее.Для этого я увеличиваю счетчик времени с помощью функции 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) 

Спасибо!

Answer 1

Этот код хорошо работает для меня:

let timeData = {
time: -1
}
timeData.time = setInterval(()=>{
    timeData.time += 1 
    console.log(timeData.time)
  }, 1000);
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.")
  }
}
window.onload = start();
window.onbeforeunload = function () {
  var timerJson = JSON.stringify(timeData) 
  localStorage.setItem("timeData", timerJson);
}

Answer 2

Я предполагаю, что вы тестируете это локально.Поскольку локальное хранилище хранится как файл cookie на основе домена (а у вас нет домена при локальном тестировании сценария), данные просто не сохраняются.

В HTML5 объект localStorage изолирован длястраница / домен?

Редактировать: Под локальным я подразумеваю простой HTML-файл без использования веб-сервера.

Answer 3

window.onbeforeunload должно иметь значение типа function, но в вашем коде это undefined.Следовательно, вы должны изменить это на следующее:

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

Я также удалил параметр из функции, сделав его закрытием.

UPD.Как отметил Джонас Уилмс, вы должны выполнить то же самое с onload событием и start функцией.

ТАКЖЕ.Чтобы всегда иметь актуальное (новое) значение timeSpent, вы должны сделать следующее:

const state = {timeSpent: -1}

И везде заменить timeSpent на state.timeSpent.

Таким образом, закрытия будутиметь ссылку на state объект, вместо того, чтобы просто брать начальное значение примитива timeSpent.