原生js+cookie實(shí)現(xiàn)購(gòu)物車(chē)功能的方法分析
本文實(shí)例講述了原生js+cookie實(shí)現(xiàn)購(gòu)物車(chē)功能的方法。分享給大家供大家參考,具體如下:
這里使用js+cookie實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)功能。
首先是簡(jiǎn)單的HTML結(jié)構(gòu),只是為了演示下功能。
<ul> <li><span>a0001</span><span>shdfi</span><span>¥98.00</span> <input type="button" value="加入購(gòu)物車(chē)"></li> <li><span>a0002</span><span>fbvfgdb</span><span>¥698.00</span> <input type="button" value="加入購(gòu)物車(chē)"></li> <li><span>a0003</span><span>dfdfi</span><span>¥988.00</span> <input type="button" value="加入購(gòu)物車(chē)"></li> <li><span>a0004</span><span>sssi</span><span>¥998.00</span> <input type="button" value="加入購(gòu)物車(chē)"></li> <li><span>a0005</span><span>yyu</span><span>¥98.00</span> <input type="button" value="加入購(gòu)物車(chē)"></li> <li><span>a0006</span><span>sheri</span><span>¥598.00</span> <input type="button" value="加入購(gòu)物車(chē)"></li> <li><span>a0007</span><span>dsfcdhdfi</span><span>¥498.00</span> <input type="button" value="加入購(gòu)物車(chē)"></li> <li><span>sbnm,</span><span>¥698.00</span><input type="button" value="加 入購(gòu)物車(chē)"></li> </ul> <a href="購(gòu)物車(chē)查看頁(yè)面.html" rel="external nofollow" >查看購(gòu)物車(chē)</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)物車(chē)頁(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 = "商品名稱(chēng):" + goods.g_name + ",商品數(shù) 量" + goods.num + ",商品單價(jià):" + goods.g_price; ul.appendChild(li); } } else { alert("購(gòu)物車(chē)中還不存在商品!"); } } </script> </head> <body> <ul></ul> </body> </html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS寫(xiě)XSS cookie stealer來(lái)竊取密碼的步驟詳解
- jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
- JSP的Cookie在登錄中的使用
- Angularjs cookie 操作實(shí)例詳解
- 基于js中document.cookie全面解析
- 原生JS 購(gòu)物車(chē)及購(gòu)物頁(yè)面的cookie使用方法
- PHP與JavaScript針對(duì)Cookie的讀寫(xiě)、交互操作方法詳解
- javascript cookie的基本操作(添加和刪除)
- JS 設(shè)置Cookie 有效期 檢測(cè)cookie
- 實(shí)例學(xué)習(xí)JavaScript讀取和寫(xiě)入cookie
相關(guān)文章
Javascript ES6中對(duì)象類(lèi)型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07微信小程序中做用戶(hù)登錄與登錄態(tài)維護(hù)的實(shí)現(xiàn)詳解
微信小程序的運(yùn)行環(huán)境不是在瀏覽器下運(yùn)行的。所以不能以cookie來(lái)維護(hù)登錄態(tài)。下面這篇文章主要給大家介紹了微信小程序中如何做用戶(hù)登錄與登錄態(tài)維護(hù)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考學(xué)習(xí)。2017-05-05微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10JavaScript獲取當(dāng)前頁(yè)面上的指定對(duì)象示例代碼
這篇文章主要介紹了JavaScript獲取當(dāng)前頁(yè)面上指定對(duì)象的方法,需要的朋友可以參考下2014-02-02前端處理二進(jìn)制流文件導(dǎo)出為excel表代碼示例
這篇文章主要給大家介紹了關(guān)于前端處理二進(jìn)制流文件導(dǎo)出為excel表的相關(guān)資料,后臺(tái)管理系統(tǒng),常會(huì)出現(xiàn)導(dǎo)出excel表格功能,需要的朋友可以參考下2023-08-08