我们一步一步来，从简单到复杂外加过程中容易犯的错误

一.默认有两个商品

  <view catchtap="collect" wx:if="{{isCollected ? '收藏' : '不收藏'}}"></view>
  data:{
  isCollected: false,
  index:null
  }
  js:
  collect(){
  let isCollected = this.data.isCollected
  this.setData({
  isCollected
  })
  //提示用户
  let title = isCollected?'收藏成功':'取消收藏';
  wx.showToast({
   title,
   icon:'success'
  })
  }
  这样可以简单的实现收藏不收藏之间的切换,但是当我们切换出去再进来的
  时候，页面重新刷新，所以这个时候就需要本地存储了

二.进行本地存储

第一种错误
wx.setStorage({
    key: 'isCollected',
    data: isCollected,
    success:()=>{
    }
  });
  这样写虽然也可以实现，但是当我门收藏第一个商品的时候，我们进入第二个
  商品页面，会发现第二个商品页面也是收藏状态，所以不符合

第二种错误
既然别的商品也收藏了，所以这个时候我们就要给商品加上一个唯一标识,因为开发时候肯定这个id需要传过来我们再进行渲染页面，一般在onLoad就通过options.id获取
在onLoad中
this.setData({
   index: options.id
})
在第一次错误的基础上继续写
let index = this.data.index
let obj ={};
obj.index = isCollected
 wx.setStorage({
    key: 'isCollected',
    data: obj,
    success:()=>{
    }
  });
  这种方法乍一看也可以，但是，当我们点击第二个商品收藏的时候，它就
  把第一个商品存到本地存储的数据给覆盖了，原因就是我们定义obj的时候
  不应该定义一个空对象
  所以我们要通过getStorageSync来获取本地存储

三.获取本地存储

wx.getStorage({
key:'isCollected',
success:(res)=>{
let obj = res.data
obj[index] = isCollected;
wx.setStorage({
 key:'isCollected',
 data:obj,
 success:()=>{
 }
})
}
})
这个时候，当我们点进商品的时候，我们之前如果收藏了这个商品，那这个地方肯定显示为收藏状态，这个时候就要用到我们的onLoad钩子了

四.onLoad获取

第一个错误
//根据本地缓存的数据判断我们是否收藏
let whether = wx.getStorageSync('isCollected');
if(whether[index]){ //收藏
this.setData({
isCollected:true
})
}
别以为做完了，这样写还是有问题，当我们页面初始化，也就是清楚数据缓存的时候，这个存储为空，所以我们的效果又失效了
解决方案
let whether = wx.getStorageSync('isCollected');
if(!whether){
//在缓存中初始化空对象
wx.setStorageSync('isCollected',{})
}
if(whether[index]){ //收藏
this.setData({
isCollected:true
})
}

五.完事，觉得好的话点个赞或者评论一下呗