How to Store Data from this Code?

Question

/It is to take the data that are appearing there example when you click on the button appears the time and amount of clicks I want to take these two information and store anywhere that of to store sample localstorage or in file . txt -/

<h2>Cliques</h2>

<button name="tempo" type="button" onclick="document.getElementById('demo').innerHTML = 
 Date()">
 Clique </button>

<p id="demo"></p>
<button name="clique" class="btn btn-primary" type="button">
    Curtir <span class="badge"> 0 </span>
</button>

<script>
 var contador = document.querySelector('.badge');

 document.querySelector('button').addEventListener('click', function () {
 var numero = parseInt(contador.textContent) + 1;
 contador.textContent = numero;
 });
     
</script>
</body>

</html>

Answer 1

It would not be good to take the data of span that is inside the button, because the value that is to appear there is what is stored, so I took your html and modified it to store the amount of like and the date of the last like (you can type a history just start Let like an array and push it), soon after I update the data so it will count like and show the modified html data just below: NOTE: I stored the data in the localStorage.

---

---

HTML:

<h2>Likes</h2>

<p id="demo"></p>
<button name="clique" class="btn btn-primary" id="like" type="button">
    Likes <span class="badge" id="likeQt"> 0 </span>
</button>
<p id="date" style="display: none;">Data e horário do último like: <span id="dateLike" ></span></p>

Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
// inicializando script depois que a pagina for carregada
    $().ready(function(){

Calling the function to update the span and date data when the page is loaded:

        // Atualizar span likesQt
        atualizarSpan();

Function to create/update data in localStorage:

        function dadosClick(){
            if(typeof(localStorage)){
                let likes= '';
                if(localStorage.likes){
                    // Pega os dados armazenados caso exista
                    likes=JSON.parse(localStorage.likes);
                    // adicionando 1 mais o número atual de like e atualizando a data
                    likes={numberLike:Number(likes.numberLike)+1,date:Date()};
                    // inserindo dados atualizados
                    localStorage.likes=JSON.stringify(likes);
                    console.table(JSON.parse(localStorage.likes));
                    // Atualizar span likesQt
                    atualizarSpan();
                }else{
                    // criando dados
                    likes={numberLike:1,date:Date()};
                    // adicionando dados
                    localStorage.likes=JSON.stringify(likes);
                    // mostrar dados no console
                    console.table(JSON.parse(localStorage.likes));
                    // Atualizar span likesQt
                    atualizarSpan();
                }

            }else{
                alert('Navegador não suporta localStorage.');
            }
        }
        

Function to update the span data inside the button:

        // Atualizar span likes
        function atualizarSpan(){
            // verificando se existe dados
            if(localStorage.likes){
            var likeQt=JSON.parse(localStorage.likes);
            // mostrar data
            $("#date").show("slow");
            $("#dateLike").html(likeQt.date);
            // atualizando dados do span likeQt
            $("#likeQt").html(likeQt.numberLike);
            }
        }

When you click the button call the create/update function:

        // quando clicar no botão ele vai chamar a função dadosClick para adicionar o like
        $("#like").click(function(){
            dadosClick();
        });

    });
</script>
</body>

</html>