r/learnjavascript • • 17h ago

Using the session storage was a lot of pain

0 Upvotes
async function isThereProductsInDb(): Promise<boolean> {
    const url = '/Admin/IsThereProductsInDb';
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`Response status: ${response.status}`);
        }

        const isThereProductsInDb = await response.json();
        return isThereProductsInDb;

    } catch (error: any) {
        console.error(error);
        return false;
    }
}

async function Main() {


    var thereAreProductsInDb = await isThereProductsInDb();
    // Source - https://stackoverflow.com/a/50269969
    // Posted by Ted
    // Retrieved 2026-10-26, License - CC BY-SA 4.0

    if (!thereAreProductsInDb) {

        console.log("There are no products in the database.");

        const productsContainer = document.getElementById("products-container");
        productsContainer!.innerHTML = '';

        var notification = document.createElement("p");
        notification.innerText = "There are no products in the database yet,please import products in order to show them here."
        notification.className = "alert alert-info text-center mx-auto col-12 col-md-8 col-lg-6 p-3 p-md-4";
        notification.id='noProductsAvailableNotification'
        notification.setAttribute("role", "alert");
        productsContainer!.appendChild(notification);
        sessionStorage.setItem("hideShowProductsAnchor", "true");
        document.getElementById("showProductsAnchor")!.hidden = true;

        return

    }


    document.getElementById("noProductsAvailableNotification")!.innerText = "click the button to show the products";

    sessionStorage.setItem("hideShowProductsAnchor", "false");
    document.getElementById("showProductsAnchor")!.hidden = false;
    console.log("There are products in the database!");







}

console.log("`isThereProductsInDb` script was executed");


/**Period checking, otherwise the browser will not be aware of manual products deletion using SSMS*/
/**
 * 
 * Note : SSMS is an abbreviation for Sql Server management studio.
 */
let isRunning = false;
setInterval(async () => {
    if (isRunning) return;

    isRunning = true;
    try {
        await Main();
    } finally {
        isRunning = false;
    }
}, 1000);

the session storage was used so that if there is no products in the database, then there is no need to show the anchor element that enables the user to view the products, because there are no products in the first place, otherwise the anchor element must be shown.

he reason the session storage was used in the first place is that when the anchor element is clicked, it should be hidden because when the shown products are paginated, so there is no need to show that anchor element anymore, to hide the anchor, the hidden property is used . Due to the fact that the page reloads after the anchor is clicked and that I should not use e.preventDefault() because that will prevent the request from reaching the server, the state of the hidden property is lost, so it must be preserved some where, so I decided to use session storage like this :

// Source - https://stackoverflow.com/a/11550299
// Posted by Jason Hazel
// Retrieved 2026-10-27, License - CC BY-SA 3.0
window.addEventListener("load", (event) => {
    sessionStorage.setItem("hideShowProductsAnchor", "false");
});
const productsPageNavigators: NodeList = document.querySelectorAll("a.productsPageNavigator");

const showProductsAnchor = document.getElementById("showProductsAnchor")

productsPageNavigators.forEach((navigator) => {
    navigator.addEventListener("click", function (e) {

        sessionStorage.setItem("hideShowProductsAnchor", "true");


    }, false);
});

// Restore the hidden state after the page reloads
if (sessionStorage.getItem("hideShowProductsAnchor") === "true") {
    showProductsAnchor!.hidden = true;
}
else {
    showProductsAnchor!.hidden = false;
}

Managing the session storage is painful; are there any other alternatives that are easier to maintain ?