使用filter操作local Storage

使用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
    }