Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.62/21: Рейтинг темы: голосов - 21, средняя оценка - 4.62
0 / 0 / 0
Регистрация: 05.11.2020
Сообщений: 15

Как сохранить таймер в localstorage и возобновить его при перезагрузке страницы?

14.11.2020, 16:47. Показов 4263. Ответов 1

Студворк — интернет-сервис помощи студентам
У меня на странице есть таймер, который начинает отсчёт с момента загрузки страницы, показывает в минутах и секундах. Также есть кнопка сохранить, которая сохраняет данное время и когда мы перезагружаем страницу, таймер должен начать отсчёт с того времени, которое мы сохранили. Но при перезагрузке пишет NAN: NAN. Как мне правильно сохранить и возобновить отсчёт времени?
HTML5
1
2
<span id="timespan"></span>
<button class="save-btn">Save</button>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let timerInterval;
let timerStart;
let time = 0;
 
function updateTime() {
  time++;
  let mins = parseInt(time / 60);
  let secs = time % 60;
  if(mins < 10) {
    mins = '0' + String(mins);
  }
  if(secs < 10) {
    secs = '0' + String(secs);
}
document.querySelector('#timespan').innerHTML = `${mins}:${secs}`;  
} 
 
function startTimer() {
  timerInterval = setInterval(updateTime, 1000);
  time = 0;
  timerStart = true;
};
 
function stopTimer() {
  clearInterval(timerInterval);
  time = 0;
  timerStart = false;
}
 
document.querySelector('.save-btn').addEventListener('click', () => {
  localStorage.setItem('currentTime', document.querySelector('#timespan').innerHTML);
}
 
window.addEventListener('load', () => {
  document.querySelector('#timespan').innerHTML = localStorage.getItem('currentTime');
}, false );
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
14.11.2020, 16:47
Ответы с готовыми решениями:

Как воссоздать таблицу из localStorage при перезагрузке страницы?
Я делаю игру пятнашки. И у меня есть кнопка сохранения. Когда вы щелкаете по ней, текущее состояние...

Перезагрузка страницы с использованием localStorage
Всем крепкого здоровья, уважаемые форумчане! Мучаюсь над идеей уже несколько дней, но победить не...

Сохранить номер страницы при обновлении с localStorage
Здравствуйте, обучаюсь как работать с JS, возник такой вопрос, как мне сделать чтобы сохранялась...

1
 Аватар для web_coder2
755 / 359 / 100
Регистрация: 04.10.2018
Сообщений: 548
15.11.2020, 06:08
Доброй ночи tom7778,

Storage.getItem() возвращает строку

в методе startTimer у Вас time = 0; и этот метод нигде не вызывается

В хранилище нужно хранить time

timerStart не используется
И какие то синтаксические ошибки были

Как то так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let timerInterval;
let time = 0;
 
function updateTime() {
  time++;
  let mins = parseInt(time / 60);
  let secs = time % 60;
  if(mins < 10) {
    mins = '0' + String(mins);
  }
  if(secs < 10) {
    secs = '0' + String(secs);
}
document.querySelector('#timespan').innerHTML = `${mins}:${secs}`;
}
 
function startTimer() {
  timerInterval = setInterval(updateTime, 1000);
};
 
function stopTimer() {
  clearInterval(timerInterval);
}
 
document.querySelector('.save-btn').addEventListener('click', () => {
  localStorage.setItem('currentTime', time);
});
 
window.addEventListener('load', () => {
  time = parseInt(localStorage.getItem('currentTime'));
  if(isNaN(time)) time = 0
  startTimer()
}, false );
Добавлено через 2 минуты
И stopTimer тоже не используется, а значит и timerInterval не нада
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
15.11.2020, 06:08
Помогаю со студенческими работами здесь

Как сохранить введенное число в type="number" в localStorage?
Как сохранить введенное число в type=&quot;number&quot; в localStorage так, чтобы при обновлении страницы...

Как сохранить данные в localStorage в тесте
Есть код теста, данные теста, вопросы и ответы, подключены с помощью ассоциативных массивов Как...

Как сохранить данные в localstorage?
&lt;textarea id=&quot;primeContainer&quot;&gt;&lt;/textarea&gt; var text = document.getElementById('primeContainer')...

LocalStorage, сессия или как сохранить выбор языка
Привет, форумчане. Дело такое, имеются кнопки для переключения языка и скрипт. Хотелось бы все это...

Из MySQL сохранить в localstorage
Добрый вечер, Необходимо из MySQL получить ID, text и сохранить ID в виде ArrayList. Вывод ID...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru