1 原生JS 购物车及购物页面的cookie使用 2 ////////////////////////////////////购物页面 3 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title>购物页面</title> 9 <style> 10 ul{list-style:none;padding:0;margin:0;} 11 .goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;} 12 .goods li:hover{background-color:#efefef;} 13 .goods .price{color:#f00;font-weight:bold;} 14 .goods .price::before{ 15 content:"￥"; 16 } 17 </style> 18 <script> 19 window.onload = function(){ 20 var goods = document.getElementsByClassName('goods')[0]; 21 22 // 用于保存购物车商品信息 23 var carList = []; 24 25 // 先获取当前cookie 26 var cookies = document.cookie.split('; '); 27 for(var i=0;i<cookies.length;i++){ 28 var arr = cookies[i].split('='); 29 if(arr[0] === 'carlist'){ 30 carList = JSON.parse(arr[1]); 31 } 32 } 33 34 // 事件委托 35 goods.onclick = function(e){ 36 e = e || window.event; 37 var target = e.target || e.srcElement; 38 39 // 添加到购物车 40 if(target.tagName.toLowerCase() === 'button'){ 41 42 // 获取当前li 43 var currentLi = target.parentElement.parentElement; 44 var children = currentLi.children; 45 var currentGUID = currentLi.getAttribute('data-guid'); 46 47 // 先创建一个对象保存当前商品信息 48 var goodsObj = {}; 49 goodsObj.guid = currentGUID; 50 goodsObj.qty = 1; 51 goodsObj.name = children[1].innerHTML; 52 goodsObj.price = children[2].innerHTML; 53 goodsObj.imgUrl = children[0].src; 54 55 // 如果cookie为空，则直接添加 56 if(carList.length===0){ 57 // 添加到carList 58 carList.push(goodsObj); 59 }else{ 60 // 先判断cookie中有无相同的guid商品 61 for(var i=0;i<carList.length;i++){ 62 // 如果商品已经存在cookie中，则数量+1 63 if(carList[i].guid === currentGUID){ 64 carList[i].qty++; 65 break; 66 } 67 } 68 69 // 如果原cookie中没有当前商品 70 if(i===carList.length){ 71 // 添加到carList 72 carList.push(goodsObj); 73 } 74 75 } 76 // 存入cookie 77 // 把对象/数组转换诚json字符串：JSON.stringify() 78 document.cookie = 'carlist=' + JSON.stringify(carList); 79 } 80 81 } 82 } 83 </script> 84 </head> 85 <body> 86 <ul class="goods"> 87 <li data-guid="g01"> 88 <img src="images/shirt_1.jpg"> 89 <p>短袖衬衣</p> 90 <p class="price">98.88</p> 91 <div class="add2cart"> 92 <button>添加到购物车</button> 93 </div> 94 </li> 95 <li data-guid="g02"> 96 <img src="images/shirt_2.jpg"> 97 <p>短袖衬衣2</p> 98 <p class="price">88.88</p> 99 <div class="add2cart"> 100 <button>添加到购物车</button> 101 </div> 102 </li> 103 <li data-guid="g03"> 104 <img src="images/shirt_3.jpg"> 105 <p>短袖衬衣3</p> 106 <p class="price">9.98</p> 107 <div class="add2cart"> 108 <button>添加到购物车</button> 109 </div> 110 </li> 111 <li data-guid="g04"> 112 <img src="images/shirt_4.jpg"> 113 <p>短袖衬衣4</p> 114 <p class="price">8.88</p> 115 <div class="add2cart"> 116 <button>添加到购物车</button> 117 </div> 118 </li> 119 </ul> 120 <a href="04car.html">去结算</a> 121 </body> 122 </html> 123 124 125 126 //购物车页面、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 127 128 <!DOCTYPE html> 129 <html lang="en"> 130 <head> 131 <meta charset="UTF-8"> 132 <title>购物车</title> 133 <style> 134 #carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;} 135 #carList img{display:block;100px;} 136 #carList li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;} 137 #carList li .btn-close:hover{background-color:#f00;color:#fff;} 138 .subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;} 139 #carList .price{color:#f00;} 140 .price::before{ 141 content:'￥'; 142 font-size:11px; 143 } 144 #carList .price span{font-size:11px;} 145 </style> 146 <script> 147 window.onload = function(){ 148 /* 149 读取cookie中的carlist 150 把json字符串转换成对象/数组：JSON.parse() 151 json字符串格式： 152 1.必须用双引号 153 2.不能右注释 154 */ 155 var oCarList = document.getElementById('carList'); 156 var oSubPrice = oCarList.nextElementSibling; 157 var btnClear = document.getElementById('btnClear'); 158 159 var carList; 160 var cookies = document.cookie.split('; '); 161 for(var i=0;i<cookies.length;i++){ 162 var arr = cookies[i].split('='); 163 if(arr[0] === 'carlist'){ 164 console.log(JSON.parse(arr[1])); 165 carList = JSON.parse(arr[1]); 166 } 167 } 168 169 var subPrice = 0; 170 171 if(carList){ 172 var ul = document.createElement('ul'); 173 for(var i=0;i<carList.length;i++){ 174 var li = document.createElement('li'); 175 // 给每个li添加data-guid属性 176 li.setAttribute('data-guid',carList[i].guid); 177 178 // 商品名 179 var title = document.createElement('h4'); 180 title.innerHTML = carList[i].name; 181 182 // 商品价格 183 var price = document.createElement('p'); 184 price.className = 'price'; 185 price.innerHTML = carList[i].price + '×' + carList[i].qty; 186 187 // 商品图片 188 var img = document.createElement('img'); 189 img.src = carList[i].imgUrl; 190 191 // 添加删除按钮 192 var btnClose = document.createElement('span'); 193 btnClose.innerHTML = '×'; 194 btnClose.className = 'btn-close'; 195 196 // 计算总价 197 subPrice += carList[i].price*carList[i].qty; 198 199 li.appendChild(title); 200 li.appendChild(price); 201 li.appendChild(img); 202 li.appendChild(btnClose); 203 204 ul.appendChild(li); 205 } 206 207 // 写入页面 208 oCarList.appendChild(ul); 209 210 // 写入总价 211 // toFixed(n)获取小数点后n位（自动四舍五入，Number类型的方法） 212 oSubPrice.innerHTML = '<span class="price">' + subPrice.toFixed(2) + '</span>'; 213 } 214 215 216 // 删除商品 217 oCarList.onclick = function(e){ 218 e = e || window.event; 219 var target = e.target || e.srcElement; 220 221 // 是否点击了删除按钮 222 if(target.className === 'btn-close'){ 223 var currentLi = target.parentElement; 224 225 // 获取当前guid 226 var currentGUID = currentLi.getAttribute('data-guid'); 227 228 // 删除cookie中对应的商品 229 // 根据guid取对比 230 for(var i=0;i<carList.length;i++){ 231 // 找出要删除的商品 232 if(carList[i].guid === currentGUID){ 233 carList.splice(i,1); 234 break; 235 } 236 } 237 238 // 更新cookie 239 document.cookie = 'carlist=' + JSON.stringify(carList); 240 241 // 删除li节点 242 currentLi.parentElement.removeChild(currentLi); 243 } 244 } 245 246 // 清空购物车 247 // 1、删除DOM节点 248 // 2、删除cookie 249 btnClear.onclick = function(){ 250 oCarList.innerHTML = ''; 251 oSubPrice.innerHTML = ''; 252 253 // 利用设置有效期位过期事件来达到删除cookie的效果 254 var now = new Date(); 255 now.setDate(now.getDate()-7); 256 document.cookie = 'carlist=xx;expires=' + now; 257 } 258 } 259 260 </script> 261 </head> 262 <body> 263 <h1>购物车</h1> 264 <div id="carList"> 265 266 </div> 267 <div class="subPrice"></div> 268 <a href="#" id="btnClear">清空购物车</a> 269 </body> 270 </html>