?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;width: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中的carlist150 把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 // 获取当前guid226 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 // 更新cookie239 document.cookie = ‘carlist=‘ + JSON.stringify(carList);240 241 // 删除li节点242 currentLi.parentElement.removeChild(currentLi);243 }244 }245 246 // 清空购物车247 // 1、删除DOM节点248 // 2、删除cookie249 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>cookie ?JS
原文地址：https://www.cnblogs.com/caoxiaole/p/10006904.html