JSFiddle - React, Tailwind, and code Playground

by thecoz21

HTML

<form> 
<input type="text" name="nome" placeholder="Sandro" required><br/>
<input type="color" name="colore" required><br/>
<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');


form.addEventListener('submit', function(e){
    localStorage.setItem(form.nome.value, form.colore.value);
    stampa();
    form.reset();
    e.preventDefault();
},false);

del.addEventListener('click', function(){
    localStorage.clear();
    stampa();
},false);

function stampa(){
    ul.innerHTML ="";
    for(var x=0; x < localStorage.length; x++){
    var key = localStorage.key(x),
        val = localStorage.getItem(key);
        ul.insertAdjacentHTML('afterbegin','<li>' + key + "-" + val + "</li>");
      }
}

stampa();