0

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

        <script type="text/javascript">
var clicks = localStorage.getItem('clicks') || 0;

function onClick() {
  clicks = +clicks + 1;
  document.getElementById("clicks").innerHTML = clicks;
  updateStorage(clicks);
};

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

function updateStorage(clicks) {
  localStorage.setItem('clicks', clicks);
}
</script>
2
  • 2
    localStorage.setItem localStorage.getItem Commented 5 июн. 2019 в 16:24
  • Можно пожалуйста в рамках моего примера, я не понимаю как это применить, как не пытался - не сохраняется. Commented 5 июн. 2019 в 16:37

2 ответа 2

2

https://codepen.io/strangerintheq/pen/zQQGYV?editors=1010

let i, update = c => localStorage.setItem('counter', count.textContent = i = c)
clear.onclick = e => update(0)
inc.onclick = e => update(i+1)
update(localStorage.getItem('counter') || 0)
<span id="count"></span>
<button id="inc">inc</button>
<button id="clear">clear</button>

3
  • Спасибо. Но мне необходимо чтобы число записывалось не в рамках кнопки, а отдельно. Сейчас уже почти всё работает, кроме того, что при обновлении страницы значение становится 0, но при новом нажатии кнопки оно продолжается с последного значения. Не могу побороть. Обновил актуальный код в первом посте Commented 5 июн. 2019 в 18:16
  • используйте вместо textcontent переменную Commented 5 июн. 2019 в 18:21
  • для меня это всё совсем в новинку, так что я не особо понимаю где и как :) Потому и прошу готовое решение в рамках того, что я написал в первом посте. Если вас конечно не затруднит. Commented 5 июн. 2019 в 18:29
-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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.