Обнаружить изменение div после обновления страницы JavaScript

Question

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

Цены часто меняются. Я ввожу цены в WordPress. Я создал пользовательский тип сообщения и простую форму для ввода этих номеров. Одна цена = одно настраиваемое поле. Количество полей около 30.

И это прекрасно работает. Но мне нужно обнаружить изменение цены. Мне бы хотелось, чтобы сайт моего партнера четко показывал изменение цены.

Идеальная ситуация, когда DIV с новой ценой имеет измененный цвет, и рядом с ним появляется кнопка для сброса его цвета. Такой механизм позволит вам быстро узнать об изменениях цен. Эта страница обновляется каждые 10 секунд.

Я знаю основы JS, но не знаю, как это сделать. Я подозреваю, что вам нужно будет использовать SessionStorage. Кто-нибудь может дать мне указания или вставить ссылку на подобное решение?

---

У меня есть много дел, таких как:

<div id="price1">[types field='price1'][/types]</div>

и JS:

setTimeout(function(){
   window.location.reload(1);
}, 10000);

var price1 = document.getElementById('price1').textContent;

sessionStorage.setItem("price1-box", "price1");

var handle_storage = function () {
        console.log('change in storage! new' + price1);
      };

window.addEventListener("storage", handle_storage, false);

Answer 1

Я сделал решение. Может быть, это будет полезно кому-то еще.

<div id="eur-k">123</div>


window.onload = function() {

    setTimeout(function(){
       window.location.reload(1);
    }, 30000);

    // define div to add or remove alert
    var eurkDiv = document.getElementById('eur-k');

    // store current content in a variable
    var eurk = eurkDiv.textContent;

    // compare local storage with current content to make alarm
    if (localStorage.getItem('eurkLoc') != eurk) {
        eurkDiv.classList.add("active");
        eurkDiv.innerHTML = eurk + "<button type=\"button\" class=\"potwierdzenie\" onclick=\"resetFunction()\">OK</button>";
    }

    function resetFunction() {
        eurkDiv.classList.remove("active");
        eurkDiv.textContent = eurk;
        localStorage.setItem('eurkLoc', eurk);
    };
};