本文實例講述了原生js+cookie實現(xiàn)購物車功能的方法。分享給大家供大家參考，具體如下：
這里使用js+cookie實現(xiàn)簡單的購物車功能。
首先是簡單的HTML結構，只是為了演示下功能。
<ul> <li><span>a0001</span><span>shdfi</span><span>￥98.00</span><input type="button" value="加入購物車"></li> <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span><input type="button" value="加入購物車"></li> <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span><input type="button" value="加入購物車"></li> <li><span>a0004</span><span>sssi</span><span>￥998.00</span><input type="button" value="加入購物車"></li> <li><span>a0005</span><span>yyu</span><span>￥98.00</span><input type="button" value="加入購物車"></li> <li><span>a0006</span><span>sheri</span><span>￥598.00</span><input type="button" value="加入購物車"></li> <li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span><input type="button" value="加入購物車"></li> <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="加入購物車"></li></ul><a href="購物車查看頁面.html" rel="external nofollow" >查看購物車</a>
下面的代碼是實現(xiàn)點擊添加按鈕時，把商品信息加入cookie，注釋比較詳細，在代碼中我把操作cookie（set和get封裝為cookieUtil對象的方法，方便調(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")) : []; //遍歷給每個input元素添加點擊事件 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;//立即結束遍歷 } } //如果i的值與arr長度相同，則證明遍歷結束也沒有進入過if條件語句， //cookie中不存在該商品,新建一個商品對象，并添加到數(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對象
//cookie Utilvar 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); }};上面的代碼都非常好理解，下面這個頁面就是把cookie中的商品信息取出來。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>查看購物車頁面</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則取出來顯示到頁面上 for (var i = 0; i < arr.length; i++) { //每個數(shù)組元素對應的是一個商品對象 var goods = arr[i]; var li = document.createElement("li"); li.innerHTML = "商品名稱：" + goods.g_name + "，商品數(shù)量" + goods.num + "，商品單價：" + goods.g_price; ul.appendChild(li); } } else { alert("購物車中還不存在商品！"); } } </script></head><body><ul></ul></body></html>更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
