Как сделать так, чтобы выведенное время оставалось неизменным после перезагрузки страницы

Question

Я делаю сайт и мне нужно чтобы после клика выводилось текущее время, но после каждого обновления страницы оно меняется, как сделать так, чтобы оно оставалось неизменным?

вот код HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calendar">
    <div class="year"></div>
    <div class="month"></div>
    <div class="day"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
</div>
    <script src="script.js"></script>
</body>
</html>

JS:

let year = document.querySelector('.year');
let month = document.querySelector('.month');
let hours = document.querySelector('.day');
let minutes = document.querySelector('.minutes');
let seconds = document.querySelector('.seconds');
const btn = document.querySelector('.btn');

function allDate(){
    let time = new Date();
    year.innerHTML = time.getFullYear();
    month.innerHTML = time.getMonth() + 1;
    hours.innerHTML = time.getHours();
    seconds.innerHTML = time.getSeconds()
}

allDate();

Answer 1

Вот пример, как сохранять и доставать значения из localStorage.

Демонстрация на примере одного поля(В сниппет не обернуть, т.к. localStorage не поддерживается)

<div class="calendar">
  <div class="seconds"></div>
  <button class="btn">Новая дата</button>
</div>
  
  const seconds = document.querySelector('.seconds');
  const btn = document.querySelector('.btn');

  function allDate(){
    let time = new Date();
    seconds.innerHTML = time.getSeconds();
    // Сохраняем значение
    localStorage.setItem('seconds', time.getSeconds());
  }

  document.addEventListener('DOMContentLoaded', () => {
    // Достаем значение
    const secondSave = localStorage.getItem('seconds');
    if (secondSave) { // Если есть, отображаем
      seconds.innerHTML = secondSave;
    }
  })
  // При клике на кнопку, запустится функция
  btn.addEventListener('click', allDate);

Что происходит в скрипте: Создается слушатель на загрузку HTML(DOMContentLoaded), как только все будет загружено, будет осуществлена попытка взять данные из localStorage и если данные есть, они будут подставлены в соответствующее поле на экране.

При вызове функции allDate, будет пересчитано значение поля, отображено на экране и сохранено в localStorage. Вызов allDate повешен на нажатие кнопки

P.S.: Для хранения множества значений, рекомендую использовать объект. Что бы ключ localStorage был один и содержал все значения.

БЛОГ НА HUSL

Как сделать так, чтобы выведенное время оставалось неизменным после перезагрузки страницы

Ответы (1 шт):