這篇文章主要介紹原生js+cookie如何實(shí)現(xiàn)購(gòu)物車功能,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
為嵐山等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及嵐山網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、嵐山網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
具體如下:
這里使用js+cookie實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能。
首先是簡(jiǎn)單的HTML結(jié)構(gòu),只是為了演示下功能。
<ul> <li><span>a0001</span><span>shdfi</span><span>¥98.00</span> <input type="button" value="加入購(gòu)物車"></li> <li><span>a0002</span><span>fbvfgdb</span><span>¥698.00</span> <input type="button" value="加入購(gòu)物車"></li> <li><span>a0003</span><span>dfdfi</span><span>¥988.00</span> <input type="button" value="加入購(gòu)物車"></li> <li><span>a0004</span><span>sssi</span><span>¥998.00</span> <input type="button" value="加入購(gòu)物車"></li> <li><span>a0005</span><span>yyu</span><span>¥98.00</span> <input type="button" value="加入購(gòu)物車"></li> <li><span>a0006</span><span>sheri</span><span>¥598.00</span> <input type="button" value="加入購(gòu)物車"></li> <li><span>a0007</span><span>dsfcdhdfi</span><span>¥498.00</span> <input type="button" value="加入購(gòu)物車"></li> <li><span>sbnm,</span><span>¥698.00</span><input type="button" value="加 入購(gòu)物車"></li> </ul> <a href="購(gòu)物車查看頁(yè)面.html" rel="external nofollow" >查看購(gòu)物車</a>
下面的代碼是實(shí)現(xiàn)點(diǎn)擊添加按鈕時(shí),把商品信息加入cookie,注釋比較詳細(xì),在代碼中我把操作cookie(set和get封裝為cookieUtil對(duì)象的方法,方便調(diào)用)。
<script> //JSON.parse //JSON.stringify onload = function () { var input = document.getElementsByTagName("input"); //判斷是否存在cookie,或是第一次添加 var arr = cookieUtil.getCookie("car") ? JSON.parse(cookieUtil.getCookie("car")) : []; //遍歷給每個(gè)input元素添加點(diǎn)擊事件 for (var j = 0; j < input.length; j++) { input[j].onclick = function () { var g_id = this.parentNode.children[0].innerHTML; var g_name = this.parentNode.children[1].innerHTML; var g_price = this.parentNode.children[2].innerHTML; //遍歷cookie,判斷是否已經(jīng)存在該商品 for (var i = 0; i < arr.length; i++) { if (arr[i].g_id == g_id) { //已經(jīng)存在該商品,商品數(shù)量+1 arr[i].num++; break;//立即結(jié)束遍歷 } } //如果i的值與arr長(zhǎng)度相同,則證明遍歷結(jié)束也沒(méi)有進(jìn)入過(guò)if條件語(yǔ)句, //cookie中不存在該商品,新建一個(gè)商品對(duì)象,并添加到數(shù)組中 if (i == arr.length) { var goods = { "g_id" : g_id, "g_name" : g_name, "g_price" : g_price, num : 1 } arr.push(goods); } //把更新后的數(shù)組序列化為JSON字符串,保存到cookie中 var date = new Date(); date.setDate(date.getDate() + 10); //保存十天 //保存cookie cookieUtil.setCookie("car", JSON.stringify(arr), date); } } } </script>
這里是封裝的cookieUtil對(duì)象
//cookie Util var cookieUtil = { //添加cookie setCookie: function (name, value, expires) { var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if (expires && expires instanceof Date) { cookieText += "; expires=" + expires; } // if (domain) { // cookieText += "; domain=" + domain; // } document.cookie = cookieText; }, //獲取cookie getCookie: function (name) { var cookieText = decodeURIComponent(document.cookie); var cookieArr = cookieText.split("; "); for (var i = 0; i < cookieArr.length; i++) { var arr = cookieArr[i].split("="); if (arr[0] == name) { return arr[1]; } } return null; }, //刪除cookie unsetCookie: function (name) { document.cookie = encodeURIComponent(name) + "=; expires=" + new Date(0); } };
上面的代碼都非常好理解,下面這個(gè)頁(yè)面就是把cookie中的商品信息取出來(lái)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查看購(gòu)物車頁(yè)面</title> <script src="../Utils.js"></script> <script> onload = function () { var ul = document.getElementsByTagName("ul")[0]; var arr = cookieUtil.getCookie("car"); if (arr) { arr = JSON.parse(arr); //存在cookie則取出來(lái)顯示到頁(yè)面上 for (var i = 0; i < arr.length; i++) { //每個(gè)數(shù)組元素對(duì)應(yīng)的是一個(gè)商品對(duì)象 var goods = arr[i]; var li = document.createElement("li"); li.innerHTML = "商品名稱:" + goods.g_name + ",商品數(shù) 量" + goods.num + ",商品單價(jià):" + goods.g_price; ul.appendChild(li); } } else { alert("購(gòu)物車中還不存在商品!"); } } </script> </head> <body> <ul></ul> </body> </html>
以上是“原生js+cookie如何實(shí)現(xiàn)購(gòu)物車功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站題目:原生js+cookie如何實(shí)現(xiàn)購(gòu)物車功能
分享路徑:http://www.muchs.cn/article42/pgdihc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化、域名注冊(cè)、軟件開(kāi)發(fā)、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)