"Hello world" Как результат счетчиков сделать на всех страницах одинаковым?

Question

[SamFlin]

let dataCheck = document.querySelector('[data-check]');

         window.addEventListener('click', function(event) {
	         const one = document.querySelector('[data-red]');
	         let subcheckRed = document.querySelector('.subcheck__red');	

	         if (event.target.hasAttribute('data-red')) {        
		         dataCheck.innerText = parseInt(dataCheck.innerText) + 1;
		         subcheckRed.innerText = parseInt(subcheckRed.innerText) + parseInt(one.innerText);      
	        }
        });
        document.querySelectorAll('[data-red]').forEach(el => {
          el.onclick = function() { this.classList.add('none'); };
         });

Вписываю localStorage ерунда ка кая то выходит.

Comments

[SagePtr]

Что-то не видно в коде localStorage

Answer 1

[Даниил Попов]

А в чем проблема со сторжем? Он, вроде, без подводных камней.

Вот вам простой пример: интерактивчик на codepen и сам код ниже.

<span id="total">0</span> <button id="action">+1</button>

const action = document.querySelector('#action');
const total = document.querySelector('#total');

let counter = readCounterFromStorage();
updateStorageAndElement();

action.addEventListener('click', () => {
  counter++;
  updateStorageAndElement();
})

function readCounterFromStorage() {
  return parseInt(localStorage.getItem('counter')) || 0;
}

function updateStorageAndElement() {
  total.innerText = counter;
  localStorage.setItem('counter', counter);
}

И заодно почитать теорию: localstorage

Comments

[SamFlin]

Спасибо за ответ. total.innerText = counter; ломает dataCheck.innerText = parseInt(dataCheck.innerText) + 1;

[Даниил Попов]

SamFlin, в каком смысле ломает?

[SamFlin]

На страницах на которые была передача возникает ошибка не читается null . counter++; срабатывает один раз, а если добавить querySelectorAll выдает ошибку на функцию в которой лежит counter++;

[SamFlin]

Если есть соображения как применить localStorage к моему коду был бы при много благодарен. Но и так большое спасибо за подсказку.