使用filter操作local Storage
知识点应用
1.数组的filter
filter会返回满足条件的所有结果组成新数组,不会改变原数组
2.local Storage
用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除
3.this指向问题
事件里面的普通函数中的this指向事件源
let cart=localStorage.getItem('cart')//先获取localStorage
if(cart){//判断获取到的JSON是否存在
this.cart=JSON.parse(cart)//将JSON转换为数组形式,便于后面的操作
$('#shoplist').html(template('shoplistTemlate',{cart:this.cart}))
}else{
$('#uncartlist').show();
$('#cartlist').hide()
}
//项目为面向对象 _this是指向实例化 下面的this指向当前点击事件源
$('#shoplist').on('click','button',function(){//事件委托
if($(this).hasClass('delbtn')){
const id=$(this).parents('ul').data('id')//先获取删除数据的id值
_this.cart=_this.cart.filter(shop=>{
if(shop.id!=id) return shop //返回满足条件的
})
localStorage.setItem('cart',JSON.stringify(_this.cart)) //重新添加localStorage
}