h5本地快取實現購物車功能（全功能）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>購物車特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .content{ width: 400px; height: 300px; margin: auto; } .list li{ float: left; margin: 10px; cursor: pointer; } .list li img{ height: 100px; width: 100px; } .list li .name{ font-size: 12px; text-align: center; } .list li .price{ font-size: 14px; color: red; text-align: center; } .shopp{ width: 800px; padding-left: 100px; } #tb tr th{ font-size: 14px; color: #122B40; padding: 5px; width: 200px; border: 1px solid #666; } #tb td{ border-top: 0; font-size: 16px; color: #101010; padding-left: 45px; border: 1px solid #666; } #tb td img{ width:36px; height:36px } #tb .numdit{ width: 26px; height: 26px; background-color: #23527C; border-radius: 13px; color: #CCCCCC; font-size: 24px; text-decoration: none; font-weight: bold; display: inline-block; text-align: center; margin-top: 10px; padding-bottom: 10px; } #tb .delect{ width: 50px; height: 30px; background-color: red; color: #CCCCCC; } .bottomk{ width: 798px; height: 36px; border: 1px solid #666666; margin-left: 100px; } .bottomkLeft{ float: left; width: 80px; height: 36px; line-height: 36px; margin-left: 30px; background-color: #204D74; border-radius: 13px; } .bottomkLeft a{ text-decoration: none; font-size: 20px; color: #CCCCCC; } .bottomkRight{ float: right; width: 200px; height: 36px; line-height: 36px; padding-right: 60px; } .bottomkRight a{ text-decoration: none; font-size: 16px; } .bottomkRight span{ font-size: 16px; color: red; } </style> </head> <body> <div class="content"> <ul class="list" id="ul"> <li> <div> <img src="img/1.jpg" /> </div> <p class="name">榮耀V10</p> <p class="price"> <span>$</span> <span>3000</span> </p> </li> <li> <div> <img src="img/2.jpg" /> </div> <p class="name">蘋果8</p> <p class="price"> <span>$</span> <span>5000</span> </p> </li> <li> <div> <img src="img/3.jpg" /> </div> <p class="name">小米MIXS2</p> <p class="price"> <span>$</span> <span>3299</span> </p> </li> <li> <div> <img src="img/4.jpg" /> </div> <p class="name">聯想小新</p> <p class="price"> <span>$</span> <span>6299</span> </p> </li> <li> <div> <img src="img/5.jpg" /> </div> <p class="name">戴爾</p> <p class="price"> <span>$</span> <span>5499</span> </p> </li> <li> <div> <img src="img/6.jpg" /> </div> <p class="name">小米筆記本</p> <p class="price"> <span>$</span> <span>5599</span> </p> </li> </ul> </div> <div class="shopp"> <table id="tb" cellpadding="0"cellspacing="0"> <tr> <th><input type="checkbox" onclick="allCheckbox(this)" id="inck" />全選</th> <th>商品圖片</th> <th>商品名稱</th> <th>商品價格</th> <th>商品數量</th> <th>編輯</th> </tr> <!--<tr> <td><input type="checkbox" /></td> <td> <img src="img/1.jpg" /> </td> <td>榮耀V10</td> <td>3299</td> <td> <a href="#" class="numdit" onclick="subNum(this)">-</a> <span>1</span> <a href="#" class="numdit" onclick="addNum(this)">+</a> </td> <td> <a href="#" class="delect" onclick="removeTR(this)">刪除</a> </td> </tr>--> </table> </div> <div class="bottomk"> <div class="bottomkLeft"> <a href="#" onclick="removCK()">刪除選中</a> </div> <div class="bottomkRight"> <a href="#">總計：</a> <span id="totals">0</span> </div> </div> <script> var tb=document.getElementById("tb"); //增加tr window.onload=function(){ //從localstorage取出購物車資訊 if(window.localStorage){ var shoppingText=localStorage.getItem("shoppingInfo"); if(shoppingText!=null){ var shopping=JSON.parse(shoppingText); for(var a=0;a<shopping.length;a++){ var tr=tb.insertRow(tb.rows.length); var td1=tr.insertCell(tr.cells.length); td1.innerHTML="<input type='checkbox' class='inp' />"; var td2=tr.insertCell(tr.cells.length); td2.innerHTML="<img src='"+shopping[a].img+"' />"; var td3=tr.insertCell(tr.cells.length); td3.innerHTML=shopping[a].name; var td4=tr.insertCell(tr.cells.length); td4.innerHTML=shopping[a].price; var td5=tr.insertCell(tr.cells.length); td5.innerHTML="<a href='#' class='numdit' onclick='subNum(this)'>-</a><span>"+shopping[a].num+"</span><a href='#' class='numdit' onclick='addNum(this)'>+</a>"; var td6=tr.insertCell(tr.cells.length); td6.innerHTML="<a href='#' class='delect' onclick='removeTR(this)'>刪除</a>"; } moneys(); } } var lis=document.getElementById("ul").children; for(var i=0;i<lis.length;i++){ lis[i].onclick=function(){ var img=this.children[0].children[0].getAttribute("src"); var name=this.children[1].innerHTML; var price=this.children[2].children[1].innerHTML;
var isExist=false; for(var j=1;j<tb.rows.length;j++){ if(tb.rows[j].cells[2].innerHTML==name){ var oldnum=tb.rows[j].cells[4].children[1].innerHTML; tb.rows[j].cells[4].children[1].innerHTML=parseInt(oldnum)+1; isExist=true; if(window.localStorage){ var shoppingText=localStorage.getItem("shoppingInfo"); var shoppingObject=JSON.parse(shoppingText); shoppingObject[j-1].num++; localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject)); } break; } } if(isExist==false){ var tr=tb.insertRow(tb.rows.length); var td1=tr.insertCell(tr.cells.length); td1.innerHTML="<input type='checkbox' class='inp' />"; var td2=tr.insertCell(tr.cells.length); td2.innerHTML="<img src='"+img+"' />"; var td3=tr.insertCell(tr.cells.length); td3.innerHTML=name; var td4=tr.insertCell(tr.cells.length); td4.innerHTML=price; var td5=tr.insertCell(tr.cells.length); td5.innerHTML="<a href='#' class='numdit' onclick='subNum(this)'>-</a><span>1</span><a href='#' class='numdit' onclick='addNum(this)'>+</a>"; var td6=tr.insertCell(tr.cells.length); td6.innerHTML="<a href='#' class='delect' onclick='removeTR(this)'>刪除</a>";
//向本地儲存中新增一條商品資訊 if(window.localStorage){ var shoppingText=localStorage.getItem("shoppingInfo"); var shoppingObject=null; if(shoppingText==null){ shoppingObject=[]; }else{ shoppingObject=JSON.parse(shoppingText); } var goods=new Object(); goods.img=img; goods.name=name; goods.price=price; goods.num=1; //將商品物件儲存到陣列中 shoppingObject.push(goods); localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject)) } } moneys(); } } } //全選 function allCheckbox(ck){ var is=document.getElementsByClassName("inp"); for(var i=0;i<is.length;i++){ is[i].checked=ck.checked; } } //刪除選中 function removCK(){ var is=document.getElementsByClassName("inp"); for(var i=0;i<is.length;i++){ if(is[i].checked==true){ var tr=is[i].parentNode.parentNode; var index=tr.rowIndex; var tbody=tr.parentNode; tbody.removeChild(tr); i--; if(window.localStorage){ var shoppingText=localStorage.getItem("shoppingInfo"); var shoppingObject=JSON.parse(shoppingText); shoppingObject.splice(index-1,1); localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject)); } } } if(document.getElementById("inck").checked==true){ document.getElementById("inck").checked=false; } moneys(); } //增加 function addNum(bt){ var num=bt.previousElementSibling; num.innerHTML=parseInt(num.innerHTML)+1; var index=bt.parentNode.parentNode.rowIndex-1; //增加本地快取中的數量 if(window.localStorage){ var shoppingText=localStorage.getItem("shoppingInfo"); var shoppingObject=JSON.parse(shoppingText); shoppingObject[index].num=shoppingObject[index].num+1; localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject)); } moneys(); } //減少 function subNum(bt){ var num=bt.nextElementSibling; var newNum=parseInt(num.innerHTML); var index=bt.parentNode.parentNode.rowIndex-1; if(newNum>1){ num.innerHTML=newNum-1; //減少本地快取中的數量 if(window.localStorage){ var shoppingText=localStorage.getItem("shoppingInfo"); var shoppingObject=JSON.parse(shoppingText); shoppingObject[index].num=shoppingObject[index].num-1; localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject)); } moneys(); } } //刪除一行 function removeTR(a){ var tr=a.parentNode.parentNode; var index=tr.rowIndex; var tbody=tr.parentNode; tbody.removeChild(tr); //刪除本地快取中的一行 if(window.localStorage){ var shoppingText=localStorage.getItem("shoppingInfo"); var shoppingObject=JSON.parse(shoppingText); shoppingObject.splice(index-1,1); localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject)); } } //計算總價 function moneys(){ var money=0; for(var i=1;i<tb.rows.length;i++){ var price=parseFloat(tb.rows[i].cells[3].innerHTML); var num=parseInt(tb.rows[i].cells[4].children[1].innerHTML); money+=price*num; } document.getElementById("totals").innerHTML=money; } </script> </body> </html>