How to Send Data from localStorage via AJAX to PHP and save them to an HTML file

Question

I want to send the data saved in Localstorage with PHP to a file or to a database not necessarily need to be PHP code need some solution for this

<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(){
 
    atualizarSpan();
    function dadosClick(){
    if(typeof(localStorage)){
     let likes= '';
       if(localStorage.likes){
                    
       likes=JSON.parse(localStorage.likes);
                   
       likes={numberLike:Number(likes.numberLike)+1,date:Date()};
                 
       localStorage.likes=JSON.stringify(likes);
       console.table(JSON.parse(localStorage.likes));
                 
       atualizarSpan();
       }else{
                    
       likes={numberLike:1,date:Date()};
                  
       localStorage.likes=JSON.stringify(likes);
                   
       console.table(JSON.parse(localStorage.likes));
                  
       atualizarSpan();
       }
       }else{
       alert('Navegador não suporta localStorage.');
       }
       }
         
       function atualizarSpan(){
            
       if(localStorage.likes){
       var likeQt=JSON.parse(localStorage.likes);
          
       $("#date").show("slow");
       $("#dateLike").html(likeQt.date);
           
       $("#likeQt").html(likeQt.numberLike);
       }
       }
        
       $("#like").click(function(){
            dadosClick();
       });

    });
  
</script>

Answer 1

Opa, then, I do not know if I understood very well your need, but for you to send this data saved in localStorage, or any other data, it is very simple using AJAX.

$.ajax({
    method: 'POST', // seu método pro backend
    data: { 
       dado: 'qualquer-dado',
       likes: localStorage.likes 
    }, // seus dados a serem passados, que podem ser o que você quiser
    url: 'seu-backend.php',
    success: () => alert('Dados enviados com sucesso!'), // só entra aqui se a requisição tiver sucesso
    error: () => alert('Algum erro ocorreu') // entra aqui se tiver algum erro, url errada etc
})

So you can send the data to your backend ai and make your entry in the database, etc....

There are also other ways if you do not want to use ajax, can put the localStorage data inside a form and give Submit, the possibilities are several.

I hope I’ve helped!!