Salve, devo realizzare un semplice carrello della spesa, in pratica l'utente deve salvare dei prodotti in un "carrello" e poi alla fine completare l'ordine. Siccome il progetto deve essere semplice avevo pensato di fare in questo modo, tutto lato client con js. Avevo pensato di creare delle select con i vari prodotti poi l'utente seleziona quello che gli serve e con un aggiungi lo salva in localstorage, una volta che l'utente ha finito l'acquisto, ho bisogna di verificare se tutti i prodotti sono corretti e poi passare i dati a un script lato server (php) che elaborerà tutto il resto. Ho fatto gia una prova, ma mi sono fermato in quanto non ho ben capito come posso salvare più prodotti in localstorage, con la mia provo ogni volta che salvo un prodotto sovrascrive il vecchio.

codice:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>


function dati(){


	$('#carrello_so').html(localStorage['so_scelto']); 


}


function addCarrello(){


	var prodotto = $("#select_prodotti").val();


	localStorage['prodotto_scelto'] = prodotto;


}


function Aquista(){


// Qui faccio un controllo in base al totale dell'ordine
// verifico se puo completare l'ordine


}
</script>
</head>
<body>


<p>Valore Ordine:</p>
<p><input type="text" value="" name="valore_ordine"></p>




<select name="select_prodotti" id="select_prodotti">
	<option>Prodotto 1</option>
	<option>Prodotto 2</option>
	<option>Prodotto 3</option>
	<option>Prodotto 4</option>
</select>
<button onclick="addCarrello()">Aggiungi Carrello</button>


<div id="carrello_so">
	
</div>


<button onclick="Acquista()">Acquista</button>
</body>
</html>
Inoltre vorrei che ogni volta che un utente aggiunge un prodotto nel carrello, vorrei che venga visualizzato nel div carrello_so.

Spero di essermi spiegato.