Detect div change after page refresh javascript

Question

I have a page that displays a table with numbers. These are the prices my partner sees in the store. This page is specially made for him.

Prices change often. I enter prices in WordPress. I created Custom Post Type and a simple form to enter these numbers. One price = one custom field. The number of fields is around 30.

And it works great. But I need to detect the price change. I would like the site for my partner clearly show the price change.

The ideal situation is when the DIV with new price has a changed color, and next to it appears a button to reset its color. Such a mechanism will allow you to quickly find out about price changes. This page is refreshed every 10 seconds.

I know the basics of JS, but I do not know how to do it. I suspect you will need to use SessionStorage. Can anyone give me directions or paste a link to similar solution?

---

I have a lot of divs such as:

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

and 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

I made o solution. Maybe it will be useful to someone else.

<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);
    };
};