**************利用 if-else、缓存、数据绑定来完成收藏功能
一、对加载页面的缓存的判断
- onLoad 页面内,获取缓存即各个页面的缓存状态,并用变量保存
var postsCollected = wx.getStorageSync('posts_collected');
- 但一开始加载了该页面,缓存不一定有,所以之后要判断postsCollected是否存在;
若postsCollected存在,也需要判断postColledcted是否存在
if(postsCollected){
var postCollected = postsCollected[postId];
if(postCollected){
this.setData({
//数据的更新
collected: postCollected,
currentPostId: postId
})
}
}
else{
//这段缓存在加载后,不存在。不存在就要让其存在,空对象
var postsCollected = {};
//并且每个值都赋 ‘false’
postsCollected[postId] = false; //注意 Boolean值不需要引号相扩
//再次更新缓存
wx.setStorageSync('posts_collected', postsCollected);
}
二、之后是对点击收藏后,改变缓存的函数 ‘onCollectionTap’
- 用变量 postsCollected = wx.getStorage()保存所有页面的缓存数据
- 用变量postCollected = postsCollected[this.data.currentPostId] 来保存当前单个页面的缓存数据,但是现在已经不在onLoad函数下,无法直接使用postId。
* 思路:用一个中间变量保存postId,如:this.data.currentPostId = postId
- 获取到当前页面的缓存数据后,对变量postCollected进行取反,
- 对postCollected进行取反后,再把当前的缓存数据保存到 postsCollected[this.data.currentPostId] 中
- 改变了单个缓存数据后,要对该缓存进行整体的更新,即重新设置
- 更新数据绑定
注意:要根据情况来更新缓存 和 更新数据绑定
onCollectionTap函数总体如下:
onCollectionTap:function(){
var postsCollected = wx.getStorageSync('posts_collected');
var postCollected = postsCollected[this.data.currentPostId];
//取反,收藏变成未收藏,未收藏变成收藏
postCollected=!postCollected;
postsCollected[this.data.currentPostId] = postCollected;
//状态改变后,再次更新整体缓存
wx.setStorageSync('posts_collected', postsCollected);
//再次更新绑定的数据:collected
this.setData({
collected:postCollected,
})