How to keep a number saved after page refresh-CodePudding

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;" >0</p>
                    <p id= "num9" name = "num1" style="color: yellow; margin-top: 10px; margin-left: -15px;" >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>

New Question:

Is it possible to save all the number in the p tag into a database and call it out. And if refresh it will show the number in the database and continue increase by 1 every 0.5second.

CodePudding user response：

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);

CodePudding user response：

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;" >0</p>
        <p id="num" name="num1" style="color: yellow; margin-top: 10px; margin-left: -15px;" >0
        </p>
    </div>
</form>

CodePudding user response：

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.