<!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>
