Skip to main content
adicionou 418 caracteres ao conteúdo
Fonte Link

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(){

Chamando a função de atualizar os dados do span e data quando a pagina for carregada:

        // Atualizar span likesQt
        atualizarSpan();
 

Função para criar/atualizar dados no 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.');
            }
        }
        

Função para atualizar os dados do span que está dentro do 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);
            }
        }
 

Quando clicar no button chamar a função de criar/atualizar as informações:

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

    });
</script>
</body>

</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>

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

<script>
    $().ready(function(){
        // Atualizar span likesQt
        atualizarSpan();
 

        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.');
            }
        }
        
        // 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);
            }
        }
 
        // quando clicar no botão ele vai chamar a função dadosClick para adicionar o like
        $("#like").click(function(){
            dadosClick();
        });

    });
</script>
</body>

</html>

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(){

Chamando a função de atualizar os dados do span e data quando a pagina for carregada:

        // Atualizar span likesQt
        atualizarSpan();

Função para criar/atualizar dados no 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.');
            }
        }
        

Função para atualizar os dados do span que está dentro do 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);
            }
        }

Quando clicar no button chamar a função de criar/atualizar as informações:

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

    });
</script>
</body>

</html>
Fonte Link

Não seria bom pegar os dados do span que está dentro do button, até porque o valor que é para aparecer lá é o que está armazenado, então eu peguei seu html e modifiquei ele para armazenar a quantidade de like e a data do último like (tem como fazer tipo um histórico é só iniciar a let like como um array e da push nela), logo depois eu atualizo os dados assim vai contar os like e mostrar a data html modificado logo abaixo: OBS: armazenei os dados no localStorage.



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

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

<script>
    $().ready(function(){
        // Atualizar span likesQt
        atualizarSpan();


        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.');
            }
        }
        
        // 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);
            }
        }

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

    });
</script>
</body>

</html>