购物车存储的实现

最新推荐文章于 2024-04-06 10:15:59 发布

浅浅呐

最新推荐文章于 2024-04-06 10:15:59 发布

阅读量263

点赞数 1

分类专栏：前端文章标签： js 购物车前端

本文链接：https://blog.csdn.net/qq_41445106/article/details/96447379

版权

前端专栏收录该内容

80 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	body,ul,li,p{
		margin: 0;
		padding: 0;
	}
	img{
		display: block;
		width: 280px;
		height: 220px;
	}
	li{
		list-style: none;
	}
	#productlist li{
		width: 300px;
		height: 300px;
		float: left;
		margin: 10px;
		border:1px solid #000000;
		padding:10px
	}
	#addBtn{
		width: 120px;
		height: 40px;
		border: none;
		background: #FF0000;
		color: white;
	}
</style>
</head>
<body>
	<ul id="productlist">
		<!-- <li>
			<img src="image/09.jpg" >
			<p>好看好看</p>
			<p>1000</p>
			<input type="button" id="addBtn" value="加入购物车" />
		</li> -->
	</ul>
	<script type="text/javascript">
		var data=[{
			id:1000,
			title:"家用四件套1",
			price:159,
			imgsrc:"./image/09.jpg"
		},
		{
			id:1001,
			title:"家用四件套2",
			price:172,
			imgsrc:"./image/10.jpg"

		},
		{
			id:1002,
			title:"家用四件套3",
			price:168,
			imgsrc:"./image/11.jpg"
		}]
			
		var oProlist=document.getElementById('productlist')
		var str=""
		for (var i = 0; i < data.length; i++) {
			str+=`
				<li>
					<img src="${data[i].imgsrc}" >
					<p>${data[i].title}</p>
					<p>${data[i].price}</p>
					<input type="button" class="addBtn" data-id="${data[i].id}" value="加入购物车" />
				</li>
			`
		}
		oProlist.innerHTML=str
		
		//objData存到localStorage里面的数据
		if(localStorage.getItem("cart")){
			//如果购物车之前有数据，需要把这个数据取出来作为基准值
			var objData=JSON.parse(localStorage.getItem('cart'))
		}else{
			var objData={}
		}
		var oBtns=document.getElementsByClassName('addBtn')
		for (var i = 0; i < oBtns.length; i++) {
			oBtns[i].onclick=function(){
				var id=this.getAttribute('data-id')
				// console.log(id)
				//同一商品增数量，不同商品增属性
				if(objData[id]==undefined){
					objData[id]=1
				}else{
					objData[id]++
				}
				//objData是一个对象，但是存的是字符串
				var strData=JSON.stringify(objData)
				localStorage.setItem("cart",strData)
			}
		}
	</script>
</body>
</html>