直接上代碼：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>購物頁面</title><style>ul{list-style:none;padding:0;margin:0;}.goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;}.goods li:hover{}.goods .price{color:#f00;font-weight:bold;}.goods .price::before{content:"￥";}</style><script>window.onload = function(){var goods = document.getElementsByClassName('goods')[0];// 用于保存購物車商品信息var carList = [];// 先獲取當前cookievar cookies = document.cookie.split('; ');for(var i=0;i<cookies.length;i++){var arr = cookies[i].split('=');if(arr[0] === 'carlist'){carList = JSON.parse(arr[1]);}}// 事件委托goods.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 添加到購物車if(target.tagName.toLowerCase() === 'button'){// 獲取當前livar currentLi = target.parentElement.parentElement;var children = currentLi.children;var currentGUID = currentLi.getAttribute('data-guid');// 先創建一個對象保存當前商品信息var goodsObj = {};goodsObj.guid = currentGUID;goodsObj.qty = 1;goodsObj.name = children[1].innerHTML;goodsObj.price = children[2].innerHTML;goodsObj.imgUrl = children[0].src;// 如果cookie為空，則直接添加if(carList.length===0){// 添加到carListcarList.push(goodsObj);}else{// 先判斷cookie中有無相同的guid商品for(var i=0;i<carList.length;i++){// 如果商品已經存在cookie中，則數量+1if(carList[i].guid === currentGUID){carList[i].qty++;break;}}// 如果原cookie中沒有當前商品if(i===carList.length){// 添加到carListcarList.push(goodsObj);}} // 存入cookie// 把對象/數組轉換誠json字符串：JSON.stringify()document.cookie = 'carlist=' + JSON.stringify(carList);}}}</script></head><body><ul class="goods"><li data-guid="g01"><img src="images/shirt_1.jpg"><p>短袖襯衣</p><p class="price">98.88</p><div class="add2cart"><button>添加到購物車</button></div></li><li data-guid="g02"><img src="images/shirt_2.jpg"><p>短袖襯衣2</p><p class="price">88.88</p><div class="add2cart"><button>添加到購物車</button></div></li><li data-guid="g03"><img src="images/shirt_3.jpg"><p>短袖襯衣3</p><p class="price">9.98</p><div class="add2cart"><button>添加到購物車</button></div></li><li data-guid="g04"><img src="images/shirt_4.jpg"><p>短袖襯衣4</p><p class="price">8.88</p><div class="add2cart"><button>添加到購物車</button></div></li></ul><a href="04car.html" rel="external nofollow" >去結算</a></body></html>//購物車頁面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>購物車</title><style>#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;}#carList img{display:block;width:100px;}#carList li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;}#carList li .btn-close:hover{color:#fff;}.subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}#carList .price{color:#f00;}.price::before{content:'￥';font-size:11px;}#carList .price span{font-size:11px;}</style><script>window.onload = function(){/*讀取cookie中的carlist把json字符串轉換成對象/數組：JSON.parse()json字符串格式：1.必須用雙引號2.不能右注釋*/var oCarList = document.getElementById('carList');var oSubPrice = oCarList.nextElementSibling;var btnClear = document.getElementById('btnClear');var carList;var cookies = document.cookie.split('; ');for(var i=0;i<cookies.length;i++){var arr = cookies[i].split('=');if(arr[0] === 'carlist'){console.log(JSON.parse(arr[1]));carList = JSON.parse(arr[1]);}}var subPrice = 0;if(carList){var ul = document.createElement('ul');for(var i=0;i<carList.length;i++){var li = document.createElement('li');// 給每個li添加data-guid屬性li.setAttribute('data-guid',carList[i].guid);// 商品名var title = document.createElement('h4');title.innerHTML = carList[i].name;// 商品價格var price = document.createElement('p');price.className = 'price';price.innerHTML = carList[i].price + '×' + carList[i].qty;// 商品圖片var img = document.createElement('img');img.src = carList[i].imgUrl;// 添加刪除按鈕var btnClose = document.createElement('span');btnClose.innerHTML = '×';btnClose.className = 'btn-close';// 計算總價subPrice += carList[i].price*carList[i].qty;li.appendChild(title);li.appendChild(price);li.appendChild(img);li.appendChild(btnClose);ul.appendChild(li);}// 寫入頁面oCarList.appendChild(ul);// 寫入總價// toFixed(n)獲取小數點后n位（自動四舍五入，Number類型的方法）oSubPrice.innerHTML = '<span class="price">' + subPrice.toFixed(2) + '</span>';}// 刪除商品oCarList.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 是否點擊了刪除按鈕if(target.className === 'btn-close'){var currentLi = target.parentElement;// 獲取當前guidvar currentGUID = currentLi.getAttribute('data-guid');// 刪除cookie中對應的商品// 根據guid取對比for(var i=0;i<carList.length;i++){// 找出要刪除的商品if(carList[i].guid === currentGUID){carList.splice(i,1);break;}}// 更新cookiedocument.cookie = 'carlist=' + JSON.stringify(carList);// 刪除li節點currentLi.parentElement.removeChild(currentLi);}}// 清空購物車// 1、刪除DOM節點// 2、刪除cookiebtnClear.onclick = function(){oCarList.innerHTML = '';oSubPrice.innerHTML = '';// 利用設置有效期位過期事件來達到刪除cookie的效果var now = new Date();now.setDate(now.getDate()-7);document.cookie = 'carlist=xx;expires=' + now;}}</script></head><body><h1>購物車</h1><div id="carList"></div><div class="subPrice"></div><a href="#" rel="external nofollow" id="btnClear">清空購物車</a></body></html>以上這篇原生JS 購物車及購物頁面的cookie使用方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
