jQuery: evitare i valori duplicati nei form con il sessionStorage

L'invio di un form può generare valori duplicati specie quando l'utente clicca due volte in rapida successione sul pulsante di invio o quando la richiesta è già in elaborazione. Possiamo prevenire questa situazione utilizzando jQuery ed il sessionStorage.

In pratica si tratta di memorizzare nel web storage i primi valori inviati dal form e quindi confrontarli con gli eventuali valori inviati in seguito. Se i valori coincidono, impediamo l'invio del form.

(function( $ ) {
	$( document ).ready(function() {
        var $form = $( "#form" ),
        	$output = $( "#output" ),
        	storage = window.sessionStorage;
        	
        if( storage.getItem( "email" ) !== null ) {
        	// Solo per l'esempio
        	$output.text( "Value: " + storage.getItem( "email" ) );
        }
        $form.on( "submit", function( e ) {
        	 var email = $( "#email" ).val(); // Nuovo valore
             if( storage.getItem( "email" ) !== null ) { // Il valore è già presente?
             	var storedEmail = storage.getItem( "email" ); // Il valore memorizzato nello storage
             	if( email === storedEmail ) { // Se coincidono, impediamo l'invio del form
             		$output.text( "Value already submitted" );
             		e.preventDefault(); // Impedisce l'invio del form
             	}
             } else {
             	storage.setItem( "email", email ); // Memorizza il valore nello storage
             }

        });

	});

})( jQuery );