Important: While it could be achieved with PHP (I'm using WooCommerce on Wordpress), I prefer running this script only in my browser using Javascript. Hence, I am utilizing Custom Javascript for Websites to execute the script from my browser.
The Objective of My Script: To check if the data of a specific element has been altered.
Concept: Step 1) Obtain and locally store a particular string (order number) of a specific class. Step 2) Refresh the page. Step 3) Retrieve the specific string (order number) of a specific class again. Step 4) If the strings do not match, trigger a function (play an audio).
Challenge: After the page reloads, the script initiates execution from the beginning, causing the stored string to get overridden. Consequently, the stored and freshly fetched strings are always identical.
Inquiry: How can I ensure the script runs the 3rd step only after a refresh so that the stored data remains intact without getting overwritten?
Current Implementation:
var OrderIdOld = document.getElementsByClassName("row-title"); // Select every single element with ClassName "row-title"
var x = (OrderIdOld[0].innerText); // Get the string of the first element of the class "row-title"
var compareOld = x.slice(-1); // Obtain the last element of the string
localStorage.setItem("compareOld", compareOld); // Store this element in local storage for future use.
setInterval ("window.location.reload()", 30000); // Reload page every 30 secs.
var remembered = localStorage.getItem("compareOld"); // Assign stored element to a new variable.
var n = compareOld.valueOf(); // Convert stored element into a number for easy comparison later.
var OrderIdNew = document.getElementsByClassName("row-title"); // Select every single element with ClassName "row-title"
var y = (OrderIdNew[0].innerText); // Obtain the string of the first element of the class "row-title"
var compareNew = y.slice(-1); // Extract the last element of the string
var m = compareNew.valueOf(); // Turn retrieved element into a number
function beep() {
var snd = new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAE...SS6l/");
snd.play();
}
if (n != m) {
beep();
}
Addendum: The code snippets have been curated from various resources including StackOverflow. This marks my initial inquiry. I hope the question is clearly presented and understandable.
UPDATE: The issue has been resolved by implementing the concept of executing the first step of the function only during the initial page load. Reference from this response helped me achieve the desired functionality:
The updated functional code::
function beep() {
window.open('https://www.youtube.com/watch?v=EQ3zPIj2O5k','_blank');
}
if (sessionStorage.getItem("visit") == null) {
var OrderIdOld = document.getElementsByClassName("row-title")[0].innerText.slice(-1).valueOf();
sessionStorage.setItem("OrderIdOld", OrderIdOld);
sessionStorage.setItem("visit", new Date());
setTimeout("window.location.reload()", 10000);
}
else {
var OrderIdNew = document.getElementsByClassName("row-title")[0].innerText.slice(-1).valueOf();
var x = sessionStorage.getItem("OrderIdOld");
if (x == OrderIdNew) {
setTimeout("window.location.reload()", 10000);
}
else {
beep();
var x = sessionStorage.getItem("OrderIdOld");
sessionStorage.removeItem("OrderIdOld");
sessionStorage.removeItem("visit");
setTimeout("window.location.reload()", 10000);
}
}