我们可以简单看一下利用wx.storage做得收藏功能：
//收藏 star(e){ let {id} = e.currentTarget.dataset var e = wx.getStorageSync('star') if(!e){ var e = this.data.arr } if(!this.data.star){ Toast.success('收藏成功'); e.push(this.data.detail) }else{ Toast.fail('取消收藏'); var index = e.findIndex((v)=>{ return v.basicInfo.id == id }) e.splice(index,1) } this.setData({ star:!this.data.star, arr:e, }) wx.setStorageSync('star',this.data.arr) console.log("收藏",this.data.arr) },出现得问题：
- 使用储存得时候第一个储存得值会覆盖另外一个，这是为什么呢？
解答：
第二次数据会覆盖第一次的原因就是，每次在触发这个方法的时候初始化了数据。所以就会覆盖数据
所以在这个方法里边只需要先获取e这个数据，判断e是否存在值，当有值的时候往里边push
数据，当没有数据的时候直接将数据初始化
var e = wx.getStorageSync('star') if(!e){ var e = this.data.arr }2.在点击收藏小星星得时候点击收藏发现回退历史再进来得时候明明收藏了但是小星星又暗了，那如何解决这个问题呢?怎样判断呢？
onLoad: function (options) { // console.log(options.id) // 注意：在收藏的时候判断的是传过来的id值而不是在点击收藏的时候重新赋值一个id,如果是重新赋值那么获取不到，执行顺序的问题 var id = options.id // 收藏小红星：判断是否收藏 var star = wx.getStorageSync('star') if(star.length!==0){ var k = star.findIndex((item)=>{ return item.basicInfo.id == id }) } // console.log(k) //如果能找到 if(k>=0){ this.setData({ star:true }) }else{ this.setData({ star:false }) }
}3.那么wxml里面得如何添加事件得定义状态得
<view catchtap="star" data-id = "{{detail.basicInfo.id}}" class="infoo"> <van-icon name="star-o" size="70rpx" color="#999" custom-style="margin-right:10rpx;" wx:if="{{!star}}" /> <van-icon name="star" size="70rpx" color="red" wx:if="{{star}}" custom-style="margin-right:10rpx;"/> </view>
//定义star得状态为false,不要忘了js方法里面更新状态哦！