var template = document.querySelector('#template');
var popup = document.querySelector('.popup-bg');
template.addEventListener('mouseleave', function(){
popup.style.display = "block";
}, { once: true });
Hello. A function that displays a popup when the mouse cursor exits the element. It is supposed to work on every subpage, but it is supposed to work only once. The problem is that when you enter another subpage, it will reload and work again.
It is enough for the function to work only once, regardless of the change of the subpage in one session. It may work again (once) when it is visited or refreshed again.
I need an idea how to add a function that will work once and will not reload, or put an element / template on the entire window, which will not reload after changing subpages and refer to it in the function.
You can save the flag in session storage to achieve the result you want like in this example
var template = document.querySelector('#template');
var popup = document.querySelector('.popup-bg');
if (!sessionStorage.getItem('popup')) {
sessionStorage.setItem('popup', 'set');
template.addEventListener('mouseleave', function(){
popup.style.display = "block";
}, { once: true });
}