JSFiddle - React, Tailwind, and code Playground

by Riccardo Miori

HTML

<form> 
             <input type="date" class="form-control"   name="dat_start" >

                            <input type="date" class="form-control"   name="data_end" >

                            <input type="number" name="notti" min="1" max="31" step="1" class="form-control"  >

                         <input type="text" name="struttura"  class="form-control"  >

                            <input type="number" min="1" max="31" step="1" name="numero_adulti" class="form-control"  >

                            <input type="number" min="0" max="10" step="1" name="numero_bambini" class="form-control"  >

                            <input  type="text" name="nome" class="form-control"  >

                            <input type="text" name="cognome" class="form-control"  >

                            <input type="email" name="email"  class="form-control" >

                            <input type="text" name="tel" class="form-control" >

                        <textarea  class="form-control" name="info"  ></textarea>

<input type="submit" value="salva">
</form>

<br/>
<strong>elementi inseriti</strong> <a href="#" id="cancella">cancella</a>
<ul>

</ul>

JavaScript

var form = document.forms[0],
    
    ul = document.querySelector('ul'),
    del = document.querySelector('#cancella'),
    data_start = document.querySelector('input[name="data_start"]'),
     data_end  = document.querySelector('input[name="data_end"]'),
    notti  = document.querySelector('input[name="notti"]'),
   adulti  = document.querySelector('input[name="numero_adulti"]'),
   bambini = document.querySelector('input[name="numero_bambini"]'),
   nome  = document.querySelector('input[name="nome"]'),
    cognome  = document.querySelector('input[name="cognome"]'),
    email  = document.querySelector('input[name="email"]'),
    tel  = document.querySelector('input[name="tel"]'),
    info = document.querySelector('input[name="info"]');

form.addEventListener('submit', function(evt){
    
        sessionStorage.setItem("co_" + "data_start", data_start.value);
        sessionStorage.setItem("co_" + "data_end", data_end.value);
        sessionStorage.setItem("co_" +"notti", notti.value);
        sessionStorage.setItem("co_" + "adulti", adulti.value);
        sessionStorage.setItem("co_" + "bambini",  bambini.value);
        sessionStorage.setItem("co_" + "nome",  nome.value);
        sessionStorage.setItem("co_" + "cognome", cognome.value);
            sessionStorage.setItem("co_" + "email", email.value);
            sessionStorage.setItem("co_" + "tel",  tel.value);
         sessionStorage.setItem("co_" + "info",  info.value);
    

    
    stampa();
    evt.preventDefault();    
}, false);

function stampa(){
    ul.innerHTML = "";
    for(var x=0; x < localStorage.length; x++){
       var key = localStorage.key(x);
       if(key.substring(0,3) === 'co_'){
           var value = localStorage.getItem(key);
           ul.insertAdjacentHTML('afterbegin',
               '<li>' + key.substring(3) + ':' + value + '</li>'                     
           ); 
       }
    }
}

window.addEventListener('storage', function(){
    stampa();
}, false);

stampa();