js购物车及购物页面的cookie使用 原生JS 购物车及购物页面的cookie使用方法
人气:0想了解原生JS 购物车及购物页面的cookie使用方法的相关内容吗,在本文为您仔细讲解js购物车及购物页面的cookie使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,cookie,购物车,下面大家一起来学习吧。
直接上代码:
<!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 = []; // 先获取当前cookie var 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'){ // 获取当前li var 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){ // 添加到carList carList.push(goodsObj); }else{ // 先判断cookie中有无相同的guid商品 for(var i=0;i<carList.length;i++){ // 如果商品已经存在cookie中,则数量+1 if(carList[i].guid === currentGUID){ carList[i].qty++; break; } } // 如果原cookie中没有当前商品 if(i===carList.length){ // 添加到carList carList.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; // 获取当前guid var 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; } } // 更新cookie document.cookie = 'carlist=' + JSON.stringify(carList); // 删除li节点 currentLi.parentElement.removeChild(currentLi); } } // 清空购物车 // 1、删除DOM节点 // 2、删除cookie btnClear.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使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
加载全部内容