Как сохранить данные счётчика при перезагрузке страницы (JS)?

Question

[Александр Шишкин]

Приветствую!
Есть кнопка которая при нажатии добавляет +1 к каунтеру. Задача сделать так, чтобы на каждом устройстве данные сохранялись при перезагрузке страницы. Код самой кнопки:

<script type="text/javascript">
var clicks = 0;
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  };
function onReset() {
    if (confirm('Вы уверенны? Данные обнулятся!')){
      clicks = 0;
      document.getElementById("clicks").innerHTML = clicks;
    }
}
</script>

Comments

[ITlatip]

А можно и html разметку дать если не трудно очень нужно

Answer 1

[Александр Шишкин]

Финальное рабочее решение выглядит так. Вдруг кому-то пригодится.

<script type="text/javascript">
    var clicks = localStorage.getItem('clicks') || 0;
    document.addEventListener("DOMContentLoaded", function(){ document.getElementById("clicks").innerHTML = localStorage.getItem('clicks') || 0; });
    function onClick() {
      clicks = +clicks + 1;
      document.getElementById("clicks").innerHTML = clicks;
      updateStorage(clicks);
    };

    function onReset() {
      if (confirm('Вы уверенны? Данные обнулятся!')) {
        clicks = 0;
        document.getElementById("clicks").innerHTML = clicks;
        updateStorage(clicks);
      }
    }

    function updateStorage(clicks) {
      localStorage.setItem('clicks', clicks);
    }
    </script>

Answer 2

[Егор Живагин]

На каждом устройстве -- т.е. нажал в браузере, а в телефоне обновилось? Тогда ответ один: хранить значение счётчика на бэке

Comments

[Александр Шишкин]

Нет, без привязки к личности пользователя. Но с привязкой к браузеру. Вообще это счетчик для пешеходного трафика. То есть человек выходит считать людей, открывает сайтик и тупо кликает на кнопку чтобы не забыть, следовательно есть риск что он выключит телефон или случайно обновит страницу, и вот в таких случаях не должен сбиться каунтер. Это как-то решается Local Storage, но у меня не получается

[Егор Живагин]

Александр Шишкин, ну, в таком случае к решению через куки вы уже пришли)
По вашему апдейту, попробуйте так:

var clicks = localStorage.getItem('clicks') || 0;
document.getElementById("clicks").innerHTML = clicks;
...