39购物车

39购物车

实现购物车的数据存储功能，将加入购物车的商品id和数量存入cookie中

//json中存储有一些商品的id, src, price, name
let json = [
{
	"id" : 1,
    "src" : " ",
    "price" :  ,
    "name" : " "
},
{
    "id" : 2,
    "src" : " ",
    "price" :  ,
    "name" : " "
},
{
    "id" : 3,
    "src" : " ",
    "price" :  ,
    "name" : " "
}
]

在html中只有一个id名为cont的空div标签

<div id = "cont"></div>

在js中

//定义一个空的字符串用于接收拼接的标签

let html = ""

//对json数组进行遍历

json.forEach(item => {
    
    //解构赋值，遍历id, src, price, name
    
	let {
		id,
		src,
		price,
		name
	} = item
    
    //每次循环都会添加当前的json的数据，并且拼接标签到html字符串中
    
	html += '<div><img src="' + src + '><p>' + name +'</p><span>¥' +price +'</span><a href="javascript:;" οnclick="addCart(' +id +', 1)">加入购物车</a></div>'
})

//获取id名为cont的div标签

let cont = document.querySelector("#cont")

//将拼接的字符串添加到获取的div标签中，再对添加的标签设置样式
//就能看到上商品的展示的基本结构和样式

cont.innerHTML += html

//拼接的a标签里面有onclick = "addCart('+ id +', 1)"点击事件
//定义函数addCart(id, num)，且num默认为1

function addCart(id, num) {
    
	//使用cookie封装的对象的方法获取名称为cart的cookie
    
	let data = cookie.getCookie("cart")
    
    //如果cookie中不存在名为cart的数据
    
	if (!data) {
        
        //将当前的id存储到定义的对象obj中且数量为1
        
		let obj = {
			[id]: 1
		}
        
        //将对象obj转化为字符串用于存储
        
		let str = JSON.stringify(obj)
        
        //使用cookie封装的对象的方法将cart存入cookie中
        
		cookie.setCookie("cart", str)
        
	} else {
        
        //如果cookie中存在名为cart的数据
        //将名为cart的cookie中的数据转为对象obj
        
		let obj = JSON.parse(data)
        
        //对对象obj进行遍历
        
		for (let i in obj) {
            
            //当对象obj的属性有商品的id时
            
			if (id == i) {
                
                //num在原来数量的基础上+1
                
				num = ++obj[id]
			}
		}
        
        //如果cookie中存在名为cart的数据，重新传入更新后的数据
        //如果cookie中不存在名为cart的数据，新建一个属性名为"id"的键值对
        
		obj[id] = num
        
        //将新的对象obj转为字符串
        
		let str = JSON.stringify(obj)
        
        //使用cookie封装的对象的方法将cart存入cookie中
        
		cookie.setCookie("cart", str)
	}
}