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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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