How to keep a number saved after page refresh

user_19576367 0
Viewed 70

As the title, I need to let the number can continue increase after refresh the webpage but now the number will reset after refresh the webpage. Anyone know how to solve it?

Here is the number

<form method="POST">
                <div style="background-color: white; display: flex; flex-wrap: nowrap; justify-content: space-evenly; margin-bottom: 15px; border-radius: 5px;">
                    <p id= "num" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0</p>
                    <p id= "num9" name = "num1" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0</p>
                </div>
</form>

Here is the design of the number
<style type="text/css">
    .number_border{
        text-align: center;
        border-radius: 5px;
        background: red;
        width: 20px;
        height: 30px;
    }
</style>

Here is the function to let the number can increase by 1 every 0.5 second
<script>
    var number1 = 0;
    var number2 = 0;
    var el = document.getElementById('num1');
    var el1 = document.getElementById('num');

    function incrementSeconds() {
        if (number1 < 9){
            number1 += 1;
            el.innerText = number1;
        }else if (number2 < 9) {
            number1 = 0;
            el.innerText = number1;
            number2 += 1;
            el1.innerText = number2;
        }
    }

    var increase = setInterval(incrementSeconds, 500);
</script>
php javascript
3 Answers

You'll need to choose a way to save the variable to the browser. The most common way to do this it to use localStorage, though you could also use cookies (not recommended since it's very limiting), or IndexedDB (super powerful but overkill for the simple task you need to do).

So for example (I haven't tested the below but it should work or be close to working, and shows you how to use localStorage:

// Default to 0 if they haven't been set before
var number1 = parseInt(localStorage.getItem('number1')) || 0;
var number2 = parseInt(localStorage.getItem('number2')) || 0;

var el = document.getElementById('num1');
var el1 = document.getElementById('num');

function incrementSeconds() {
    if (number1 < 9) {
        number1 += 1;
        el.innerText = number1;
        localStorage.setItem('number1', number1);
    } else if (number2 < 9) {
        number1 = 0;
        el.innerText = number1;
        localStorage.setItem('number1', number1);

        number2 += 1;
        el1.innerText = number2;
        localStorage.setItem('number2', number2);
    }
}

var increase = setInterval(incrementSeconds, 500);
user_25182310

This should work for you NOTE: Your code stop counting when num2 = 9 Do not try this code snippet here, stack overflow disallow using local storage

    var number1 = parseInt(localStorage.getItem('number1')) || 0;
    var number2 = parseInt(localStorage.getItem('number2')) || 0;

    var el = document.getElementById('num1');
    var el1 = document.getElementById('num');
    el1.innerText = number2;
    el.innerText = number1;
    function incrementSeconds() {
        if (number1 < 9) {
            number1 += 1;
            el.innerText = number1;
            localStorage.setItem('number1', number1);
        } else if (number2 < 9) {
            number1 = 0;
            el.innerText = number1;
            localStorage.setItem('number1', number1);

            number2 += 1;
            el1.innerText = number2;
            localStorage.setItem('number2', number2);
        }
    }

    var increase = setInterval(incrementSeconds, 500);
    .number_border {
        text-align: center;
        border-radius: 5px;
        background: red;
        width: 20px;
        height: 30px;
    }
<form method="POST">
    <div
        style="background-color: white; display: flex; flex-wrap: nowrap; justify-content: space-evenly; margin-bottom: 15px; border-radius: 5px;">
        <p id="num1" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0</p>
        <p id="num" name="num1" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0
        </p>
    </div>
</form>

user_40001300

For these kind of state management , we can use queryparams in url after hash, in which the count/number can be maintained post reload/refresh.

user_153538730
Related