溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹原生js+cookie如何實(shí)現(xiàn)購物車功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
具體如下：
這里使用js+cookie實(shí)現(xiàn)簡單的購物車功能。
首先是簡單的HTML結(jié)構(gòu)，只是為了演示下功能。
<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>
下面的代碼是實(shí)現(xiàn)點(diǎn)擊添加按鈕時(shí)，把商品信息加入cookie，注釋比較詳細(xì)，在代碼中我把操作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")) : [];
//遍歷給每個(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長度相同，則證明遍歷結(jié)束也沒有進(jìn)入過if條件語句，
//cookie中不存在該商品,新建一個(gè)商品對象，并添加到數(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 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è)頁面就是把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++) {
//每個(gè)數(shù)組元素對應(yīng)的是一個(gè)商品對象
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("購物車中還不存在商品！");
}
}
</script>
</head>
<body>
<ul></ul>
</body>
</html>以上是“原生js+cookie如何實(shí)現(xiàn)購物車功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼