How to make a popup that only pops up once per user?-CodePudding

I'm a beginner in web development, and I'm trying to program a website for my class. So I watched a video on making a popup, but the popup comes up every time the user reloads the page. I need help, please.

Here's my HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KI22 Website</title>

    <!-- FONTAWESOME CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!--GOOGLE FONTS (MONTSERRAT)-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div >
        <button id="close">&times;</button>
        <h2>Achtung! Wichtige Regeln</h2>
        <p>1.An keine andere Person außerhalb der Klasse teilen!</p>
        <p>2.KEINE SCREENSHOTS!</p>
        <p>3.Nur schulrelevante Dateien hochladen!</p>
    </div>
    <!--==================== END OF POPUP ====================-->

    <nav>
        <div >
            <a href="index.html">
                <img  src="images/logo.png" alt="logo">
            </a>
            <ul >
                <li><a href="index.html">Hauptmenü</a></li>
                <li><a href="fächer.html">Fächer</a></li>
                <li><a href="mitteilungen.html">Mitteilungen</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
            <button id="open-menu-btn"><i ></i></button>
            <button id="close-menu-btn"><i ></i></button>
        </div>
    </nav>
    <!--==================== END OF NAVBAR ====================-->

    <header>
        <div >
            <div >
                <h1>Willkommen zur KI Website</h1>
                <p><h4>Diese Website wurde für schulische zwecke von G. Daoud programmiert. Du wirst in der Lage sein, deine Aufzeichnungen von der Unterrichtsstunde auf dieser Website hochzuladen, und die Aufzeichnungen deiner Klassenkameraden zu downloaden.</h4></p>
                <a href="fächer.html" >Loslegen</a>
            </div>

            <div >
                <div >
                    <img src="./images/student.png">
                </div>
            </div>
        </div>
    </header>
    <!--==================== END OF HEADER ====================-->





    <section >
        <div >
            <div >
                <h1><i ></i>Discord</h1>
                <p>Hier kannst du Member des Discord-Servers KI22 werden. Wir freuen uns über jeden Member.</p>
                <p>In dem Server hast du die Möglichkeit, uns zu kontaktieren wenn du Probleme mit der Website hast, oder auch wenn es allgemein Probleme im Server gibt.</p>
                <a href="#" >Member werden</a>
            </div> 
        </div>
    </section>




    <script src="app.js"></script>
</body>
</html>

Here is my JS code:

window.addEventListener("load", function() {
    setTimeout(
        function open(event) {
            document.querySelector(".popup").style.display = "block";
        },
        1000
    )
});


document.querySelector("#close").addEventListener("click", function() {
    document.querySelector(".popup").style.display = "none";
});

I tried to find an answer on google, but those solutions didn't work. I also watched youtube videos, but still nothing.

CodePudding user response：

You can use localStorage to tell the browser that the page has already been loaded. You'll check if not loaded yet, then open/close your pop up

window.addEventListener("load", function() {
setTimeout(
    function open(event) {
        if(!localStorage.getItem('loaded')){
             document.querySelector(".popup").style.display = "block";
             localStorage.setItem('loaded', 'true');
        }
    },
    1000
  )
});


document.querySelector("#close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});

when ever you want to open the popup again, call localStorage and reload the page.

 localStorage.setItem('loaded',null);