js+cookie를 이용한 장바구니 기능 구현 방법
- 亚连원래의
- 2018-06-19 12:03:533302검색
이 글에서는 주로 장바구니 기능을 네이티브 js+쿠키로 구현하는 방법을 소개하고, 장바구니 기능을 구현하기 위해 쿠키 저장과 결합된 자바스크립트의 관련 조작 기술을 예시 형태로 분석하여 필요한 친구들이 참고할 수 있습니다. it
이 문서의 예에서는 기본 js +쿠키가 장바구니 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
여기에서는 js+cookie를 사용하여 간단한 장바구니 기능을 구현합니다.
첫 번째는 기능을 보여주기 위한 간단한 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>
다음 코드는 추가 버튼을 눌렀을 때 쿠키에 제품 정보를 추가하는 코드입니다. 코드에서는 쿠키를 더 자세히 다루도록 하겠습니다. (간편한 호출을 위해 set 및 get은 cookieUtil 객체 메소드로 캡슐화되어 있습니다.) .
<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，判断是否已经存在该商品
for (var i = 0; i < arr.length; i++) {
if (arr[i].g_id == g_id) {
//已经存在该商品，商品数量+1
arr[i].num++;
break;//立即结束遍历
}
}
//如果i的值与arr长度相同，则证明遍历结束也没有进入过if条件语句，
//cookie中不存在该商品,新建一个商品对象，并添加到数组中
if (i == arr.length) {
var goods = {
"g_id" : g_id,
"g_name" : g_name,
"g_price" : g_price,
num : 1
}
arr.push(goods);
}
//把更新后的数组序列化为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);
}
};위 코드는 매우 이해하기 쉽습니다. 다음 페이지는 쿠키에 있는 제품 정보를 꺼내는 것입니다.
<!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++) {
//每个数组元素对应的是一个商品对象
var goods = arr[i];
var li = document.createElement("li");
li.innerHTML = "商品名称：" + goods.g_name + "，商品数
量" + goods.num + "，商品单价：" + goods.g_price;
ul.appendChild(li);
}
} else {
alert("购物车中还不存在商品！");
}
}
</script>
</head>
<body>
<ul></ul>
</body>
</html>위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Angular에서 민감한 텍스트 프롬프트를 구현하는 방법
js에서 왼쪽과 오른쪽으로 이미지 슬라이딩을 구현하는 방법
BrowserRouter가 반응과 협력하는 방법 -라우터 서버
위 내용은 js+cookie를 이용한 장바구니 기능 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.