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>