javascriptcountdown

Prevent countdown reset on page load


I have a stock counter that works fine, but I would like to prevent the countdown from resetting when the page reloads.

<span class="qty" id="qty"></span>

<script>
    var qty = 57
    var qtyId = document.getElementById("qty");

    setQty(qty);

    function setQty(qty)
    {
        qtyId.innerHTML = qty;

        if (qty==0) return;

        var parts = Math.floor((Math.random() * 3) + 1);
        if (parts > qty) parts = qty;

        var msec =  Math.floor(((Math.random() * 15) + 15)*1000);

        qty -= parts;

        setTimeout(function() {
            setQty(qty);
        }, msec)
    }
</script> 

I've tried this based on other scripts, but it doesn't stop the countdown from resetting on page reload.

    var qty = 57
    var qtyId = document.getElementById("qty");

    setQty(qty);
    
        var saved_countdown = localStorage.getItem('saved_countdown');

    if(saved_countdown == null) {
        // Set the time we're counting down to using the time allowed

        time = new_countdown;
        localStorage.setItem('saved_countdown', new_countdown);
    } else {
        time = saved_countdown;
    }

    function setQty(qty)
    {
        qtyId.innerHTML = qty;

        if (qty==0) return;

        var parts = Math.floor((Math.random() * 3) + 1);
        if (parts > qty) parts = qty;

        var msec =  Math.floor(((Math.random() * 15) + 15)*1000);

        qty -= parts;

        setTimeout(function() {
            setQty(qty);
        }, msec)
    }

Would anyone here be able to help me out? Thank you!


Solution

  • Your version doesn't work because you're trying to assign a non-existing variable (new_countdown) to time. I've refactored your code and fixed the problem:

    <span class="qty" id="qty"></span>
    <button id="reset">Reset</button>
    
    <script>
        const setQty = (qty) => {
            qtySpan.innerHTML = qty;
    
            if (qty == 0) return;
    
            let parts = Math.floor((Math.random() * 3) + 1);
            if (parts > qty) parts = qty;
    
            const msec =  Math.floor(((Math.random() * 15) + 15) * 1000);
            qty -= parts;
    
            // Save the updated quantity in localStorage
            localStorage.setItem('saved_countdown', qty);
    
            setTimeout(() => setQty(qty), msec);
        }
    
        // Get the saved countdown value from localStorage, or use default value of 57 if not found
        const defaultQty = localStorage.getItem('saved_countdown') ?? 57;
        
        const qtySpan = document.getElementById('qty');
        const resetBtn = document.getElementById('reset');
    
        // Add a click event listener to the reset button
        resetBtn.addEventListener('click', () => {
            // Remove the saved countdown value from localStorage and refresh the page
            localStorage.removeItem('saved_countdown');
            location.reload();
        });
    
        // Set the initial value of the quantity
        setQty(defaultQty);
    </script>