<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="app"><p id="pinapp">You shoud never see this.</div>
    </body>
    <script>
        !function () // exec now
        {
            const WARNING_MESSAGES = [
                "If you reload me 3 times I will kick you out.",
                "Warning! If you reload 2 more times I will kick you out!",
                "This is my final warning! Do not reload anymore.",
                "You have been kicked out!"
            ];

            var p, reloadCount = 0;
            initializeReloadCount();

            function initializeReloadCount() {
                window.addEventListener("beforeunload", beforeUnloadHandler);
                checkReload();
            }

            function checkReload() {
                if (localStorage.getItem("reloadCount")) {
                    reloadCount = parseInt(localStorage.getItem("reloadCount"));
                } else {
                    reloadCount = 0;
                    localStorage.setItem("reloadCount", reloadCount);
                }

                if (Math.floor(Date.now() / 1000) - localStorage.getItem("lastUnloadAt") < 5) {
                    onReloadDetected();
                } else {
                    reloadCount = 0;
                    localStorage.setItem("reloadCount", reloadCount);
                }
                p = document.getElementById('pinapp');
                p.innerHTML = '<p>' + WARNING_MESSAGES[reloadCount];
            }

            function beforeUnloadHandler() {
                localStorage.setItem("lastUnloadAt", Math.floor(Date.now() / 1000));
                window.removeEventListener("beforeunload", beforeUnloadHandler);
            }

            function logout(params) {
                // logout API call
                resetReloadCount();
            }

            function onReloadDetected() {
                reloadCount = reloadCount + 1;
                localStorage.setItem("reloadCount", reloadCount);

                if (reloadCount === 3) {
                    logout();
                }


            }

            function resetReloadCount() {
                window.removeEventListener("beforeunload", beforeUnloadHandler);
                localStorage.removeItem("lastUnloadAt");
                localStorage.removeItem("reloadCount");
            }

        }
        ();
    </script>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.