How can I preserve the animations and settimeout value when the page is refreshed with javascript?

When the page is entered for the first time, the remaining remaining value is shown in seconds to everyone in the same way. In other words, the time does not start again every time the page is entered. It is redirected to the tensecond() function when the time is up. I use setTimeout in animations to coincide with the countdown from 10 part in this function. I'm having some problems and I'm open to your suggestions. The first problem is this: If the time is close to running out when I enter or refresh the page, for example, if there is 5 seconds, then the tensecond() function is not requested when the time is 0, so I can't see the animations. I have to wait 1 more turn before I can see the animations. The second problem is this: I think it is related to the first problem. Animations disappear when I refresh the page while the animations are playing, or when I exit the page and re-enter immediately. Actually, my problem is briefly about this: Every time I enter the page, the time continues from where it left off. I want to see this in animations or functions.

CSS

 @keyframes glowing1 {
        50% {
            background-color: #3fd619;
            box-shadow: 0 0 20px #3fd619;
         
        }

        100% {
            background-color: #3fd619;
            box-shadow: 0 0 5px #3fd619;
      

        }
    }

    .glowing500 {
        animation: glowing 300ms infinite;
        
    }

    .glowingwin {
        animation: glowing1 300ms infinite;
    }

JS

function tensecond() {

        setTimeout(function () {
            const
                delay = ms => new Promise(r => setTimeout(r, ms)),
                btn_A = document.getElementById('first'),
                btn_B = document.getElementById('second'),
                animLoopgenerator = function* () {
                    const animLoop = [{
                            stop: null,
                            start: btn_A,
                            time_ms: 600
                        }, {
                            stop: btn_A,
                            start: btn_B,
                            time_ms: 600
                        }, {
                            stop: btn_B,
                            start: null,
                            time_ms: null
                        },


                    ];

                    for (elm of animLoop) yield elm
                };

            async function animLoop() {
                for await ({
                    stop,
                    start,
                    time_ms
                } of animLoopgenerator()) {
                    if (stop) stop.classList.remove('glowing500');
                    if (start) start.classList.add('glowing500');
                    if (time_ms) await delay(time_ms);
                }
            }

            animLoop();
        }, 25000);

        setTimeout(function () {

            var random = Math.floor(Math.random() * 2) + 1;

            if (random == 1) {
                const
                    delay = ms => new Promise(r => setTimeout(r, ms)),
                    btn_A = document.getElementById('first'),
                    animLoopgenerator = function* () {
                        const animLoop = [{
                            stop: null,
                            start: btn_A,
                            time_ms: 4000
                        }, {
                            stop: btn_A,
                            start: null,
                            time_ms: null
                        }, ];

                        for (elm of animLoop) yield elm
                    };

                async function animLoop() {
                    for await ({
                        stop,
                        start,
                        time_ms
                    } of animLoopgenerator()) {
                        if (stop) stop.classList.remove('glowingwin');
                        if (start) start.classList.add('glowingwin');
                        if (time_ms) await delay(time_ms);
                    }
                }

                animLoop();
            } else if (random == 2) {
                const
                    delay = ms => new Promise(r => setTimeout(r, ms)),
                    btn_B = document.getElementById('second'),
                    animLoopgenerator = function* () {
                        const animLoop = [{
                            stop: null,
                            start: btn_B,
                            time_ms: 4000
                        }, {
                            stop: btn_B,
                            start: null,
                            time_ms: null
                        }, ];

                        for (elm of animLoop) yield elm
                    };

                async function animLoop() {
                    for await ({
                        stop,
                        start,
                        time_ms
                    } of animLoopgenerator()) {
                        if (stop) stop.classList.remove('glowingwin');
                        if (start) start.classList.add('glowingwin');
                        if (time_ms) await delay(time_ms);
                    }
                }

                animLoop();
            }

        }, 30000);
    }

    var interval10 = 10000;
    var interval35 = 35000;

    setInterval(function () {
        var remaining = interval35 - (Date.now() % interval35);
        if (remaining >= 100) {
            if (remaining >= interval10) remaining -= interval10;
            document.getElementById("timer").innerText =
                millisToMinutesAndSeconds(remaining);
        } else {
            tensecond();
        }
    }, 100);

    function millisToMinutesAndSeconds(millis) {
        var seconds = Math.floor((millis % 60000) / 1000);
        return (seconds < 10 ? "0" : "") + seconds;
    }