cookie JS

  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中的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 + '&times;' + 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 = '&times;';
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>
posted on 2018-11-23 12:56 浦东区分晏阅读(179) 评论(0) 收藏举报