点击加入购物车，数据存localStorage里

点击加入购物车
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击加入购物车</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			li{
				list-style:none;
			}
			#list{
				background:#ccc;
				width:850px;
				height:300px;
				padding:10px;
			}
			#list li{
				width:200px;
				height:240px;
				background:white;
				float:left;
				margin-right:10px;
				text-align:center;
				font-size:12px;
				position:relative;
			}
			#list img{
				width:150px;
				height:150px;
			}
			
			#list li p:nth-child(2){
				padding-top:10px;
			}
			#list li p:nth-child(3){
				color:red;
			}
			#list li p:nth-child(4){
				color:#ccc;
				padding-top:10px;
			}
			#list li button{
				width:200px;
				height:60px;
				position:absolute;
				left:0;
				bottom:0;
				border:0;
				background:orange;
				color:white;
				display:none;
			}
			
			#list1{
				background:#ccc;
				width:850px;
				padding:10px;
			}
			#list1 li{
				background:white;
				width:850px;
				height:100px;
				text-align:center;
				margin:5px;
				line-height:100px;
			}
			#list1 li:nth-child(1){
				height:50px;
				line-height:50px;
			}
			#list1 li img{
				width:100px;
				height:100px;
				
			}
			#list1 li img{
				float:left;
			}
			#list1 li p{
				float:left;
			}
			#list1 li p:nth-child(1){
				width:350px;
				
			}
			#list1 li p:nth-child(2){
				width:150px;
			}
			#list1 li p:nth-child(3){
				width:150px;
			}
			#list1 li p:nth-child(4){
				width:185px;
			}
		</style>
	</head>
	<body>
		<ul id="list">
			
		</ul>
		
		<ul id="list1">
			<li>
				
				<p>商品名称</p>
				<p>单价</p>
				<p>数量</p>
				<p>操作</p>
			</li>
			<!-- <li>
				<p>
					<img src="img/img01.jpg"/>
					小米移动电源10000mAh
				<p/>
				
				<p>79元</p>
				
				<p>X</p>
			</li> -->
			
		</ul>
		
		
		
		<script type="text/javascript">
			let arr =[{	
				pimg:"https://img14.360buyimg.com/n0/jfs/t1/84642/40/14190/27837/5db6f99dE238025a0/4d5db82e1be269c0.jpg",
				pname:"小米移动电源10000mAh",
				pprice:"79元",
				pestimate:"18万人评价",
				id:1
			},{
				
				pimg:"https://img14.360buyimg.com/n5/jfs/t1/21856/2/4838/19281/5c35bf9dE1384eda4/814a02b5a6d1e79c.jpg",
				pname:"小米移动电源10000mAh 高配版",
				pprice:"149元",
				pestimate:"23万人评价",
				id:2
			},{
				pimg:"https://img14.360buyimg.com/n5/s54x54_jfs/t3529/188/1319527774/33369/12f8b5dc/58227e74N79e66fb4.jpg",
				pname:"小米圈铁耳机",
				pprice:"99元",
				pestimate:"4.2万人评价",
				id:3
			},{
				pimg:"https://img13.360buyimg.com/n5/jfs/t9490/38/1019242527/77529/161419da/59b386c5N917b7e69.jpg",
				pname:"小米活塞耳机 基础版",
				pprice:"29元",
				pestimate:"3.6万人评价",
				id:4
			}]
			
			let html = '';
			for(let i=0;i<arr.length;i++){
				let obj = arr[i]
				html +=`
				<li>
					<img src="${obj.pimg}"/>
					<p>${obj.pname}</p>
					<p>${obj.pprice}</p>
					<p>${obj.pestimate}</p>
					<button class="btn" car-id="${obj.id}"type="button">加入购

物车</button>
				</li>
				`
				let list = document.querySelector('#list')
				list.innerHTML = html;
			}
			
			//移入显示加入购物车
			let oUl = document.getElementById('list')
			let oLi = oUl.getElementsByTagName('li')
			let btns = document.querySelectorAll('.btn')

			for(let i=0;i<oLi.length;i++){
				oLi[i].onmouseover = function(){
					for(let j=0;j<btns.length;j++){
						btns[j].style.display = 'none';
					}
					btns[i].style.display = 'block';
				}
				
				//移出隐藏
				oLi[i].onmouseout = function(){
					for(let j=0;j<btns.length;j++){
						btns[j].style.display = 'none';
					}
				}
			}
			
			//点击加入购物车
			 for(let i=0;i<btns.length;i++){
				btns[i].onclick = function(){
					//console.log(this)
					let pid = this.getAttribute('car-id')
					//console.log(pid)
					var obj = arr.find(v=>v.id == pid)
					//console.log(obj)
					//购物车有没有商品
					var str = localStorage.getItem('cars')
					if(str){
						var arr1 = JSON.parse(str)
						var fObj = arr1.find(v=>v.id == obj.id)
						if(fObj){
							//存在
							fObj.num ++
						}else{
							//不存在
							obj.num = 1;
							arr1.push(obj)
						}
						
						localStorage.setItem('cars',JSON.stringify(arr1))
					}else{
						var arr1 = [obj]
						localStorage.setItem('cars',JSON.stringify(arr1))
					}

				}
			 }
			
			
			
			//购物车
			var str = localStorage.getItem('cars')
			var arr1 = JSON.parse(str);
			
			if(arr1){
				let html = '';
				for(let i=0;i<arr1.length;i++){
					var obj = arr1[i]
console.log(obj)
					html += `
					<li>
						<p>
							<img src="${obj.pimg}" />
							${obj.pname}
						</p>
						<p>${obj.pprice}</p>
						<p>${obj.num}</p>
						<p class="ipt" car-id=${obj.id}>X</p>
					</li>
					`
				}
				var list1 = document.getElementById('list1')
				list1.innerHTML += html;
			}
			
			//删除
			var ipts = document.querySelectorAll('.ipt')
			for(let i=0;i<ipts.length;i++){
				ipts[i].onclick = function(){
					console.log('删除')
					let pid = this.getAttribute('car-id')
					arr1 = arr1.filter(function(v){
						return v.pid != pid
					})
					
					this.parentNode.remove()
					localStorage.setItem('cars',JSON.stringify(arr1))
				}
			}

		</script>
	
	</body>
</html>
来源：CSDN
作者：sqxka
链接：https://blog.csdn.net/weixin_46390620/article/details/104704273
标签
大数据
购物车