dai un'occhiata a questo codice
codice:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Esempio con html5 Web Storage</title>
<style>
dl { padding:3px;
     border:2px solid #F60;}

dl dd{ background-color:#333; color:#CCCCCC ;
font-size:14px}
     
dl dt{ border-bottom:1px solid #309;
font-size:12px}     

</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script>

 function svuotaCarrello()
 {
setCookie('carrello','', 30);
$('#carrello').html('');
$('#cookie').html('svuotato' );


 }

</script>

</head>

<body  onLoad="checkCookie()">
<h1></h1>
<dl>
<dd>Articolo</dd>
<dt>tavolo <input type="hidden" id="articolo" value="tavolo"></dt>
<dt>codice 5698 <input type="hidden" id="codice" value="5698"></dt>
<dt>prezzo € 150 <input type="hidden" id="prezzo" value="250"></dt>
<dt>Aggiungi al carrello <button onclick="articolo('articolo','codice','prezzo')">Aggiungi</button>

</dt>

<dd>Articolo</dd>
<dt>sedia<input type="hidden" id="articolo-2" value="sedia"></dt>
<dt>codice 6098 <input type="hidden" id="codice-2" value="6098"></dt>
<dt>prezzo € 50 <input type="hidden" id="prezzo-2" value="50"></dt>
<dt>Aggiungi al carrello <button onclick="articolo('articolo-2','codice-2','prezzo-2')">Aggiungi</button>

</dt>


</dl>
<div>
<h1>Carrello</h1>
<div><button onClick="svuotaCarrello()">Svuota carrello</button></div>
<div  id="carrello" style="border:1px solid #099; padding:10px;">

</div>
 </div>
 
<script>



function articolo(idarticolo,idprezzo,idcodice) 
{
    
    var articolo = $("#"+idarticolo).val() ;
    
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            
            
            localStorage.clickcount = Number(localStorage.clickcount)+1;

  localStorage.setItem("Ordine-"+localStorage.clickcount ,localStorage.clickcount);
  localStorage.setItem("articolo" , 'Articolo:' + articolo);
   localStorage.setItem("prezzo" , $("#"+idprezzo).val());
    localStorage.setItem("codice" , $("#"+idcodice).val()); 
//document.getElementById("ordini").innerHTML =localStorage.getItem("Ordine");
   

       
       
       
       $("#carrello").prepend( "<dl><dd>Id Ordine:" +localStorage.getItem("Ordine-"+localStorage.clickcount)+"</dd>"+
        "<dt>Articolo: " +localStorage.getItem("articolo")+" </dt> "+
       "<dt>Prezzo: " +localStorage.getItem("prezzo")+" </dt> "+
       "<dt>Codice: " +localStorage.getItem("codice")+" </dt></dl> ");
 
 // document.cookie= "carrello="+ $("#carrello").html();
       setCookie("carrello", $("#carrello").html(), 30);
  checkCookie();
        } else {

            localStorage.clickcount = 1;

            localStorage.setItem("Ordine-"+localStorage.clickcount,localStorage.clickcount);
  localStorage.setItem("articolo " ,'Articolo:' +  $("#"+idarticolo).val());
   localStorage.setItem("prezzo " , $("#"+idprezzo).val());
    localStorage.setItem("codice " , $("#"+idcodice).val());            
//document.getElementById("ordini").innerHTML =localStorage.getItem("Ordine");

         $("#carrello").prepend( "<dl><dd>Id Ordine:" +localStorage.getItem("Ordine-"+localStorage.clickcount)+"</dd>"+
        "<dt>Articolo: " +localStorage.getItem("articolo")+" </dt> "+
       "<dt>Prezzo: " +localStorage.getItem("prezzo")+" </dt> "+
       "<dt>Codice: " +localStorage.getItem("codice")+" </dt></dl> ");
       
       setCookie("carrello", $("#carrello").html(), 30);
  checkCookie();
        }







    } else {
        $("h1").html("Il tuo browser non supporta il web storage...");
    }
}
</script>

<h1>Carrello cookie</h1>
<div id="cookie" style="display:block">
</div>

<script>



function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var carrello=getCookie("carrello");
    if (carrello != "") {
      //  alert("Welcome again " + user);
      
      $("#cookie").html(carrello );
    } else {
        
       //user = prompt("Please enter your name:","");
      // if (user != "" && user != null) {
         //  setCookie("username", user, 30);
      // }
      
      
    }
}




</script>
</body>
</html>