Prevent countdown reset on page load

Question

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!

Answer 1

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>