JSFiddle - React, Tailwind, and code Playground

by Mariagrazia_Lunghi

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', addToLs, false);
window.addEventListener('storage', printList, false);
del.addEventListener('click', svuotaLista, false);
printList();

function addToLs(e){
    localStorage.setItem(form.nome.value,form.colore.value);
    printList();
    form.reset();
    e.preventDefault();
    e.stopPropagation();
}

function printList(){
    ul.innerHTML = "";
    for(var x=0; x < localStorage.length; x++){
        var key = localStorage.key(x),
            value = localStorage.getItem(key);
        ul.insertAdjacentHTML('beforeend', '<li>' + key + ': ' + value + '</li>');
    }
}

function svuotaLista(){
    localStorage.clear();
    printList();
    e.preventDefault();   
}