小程序 - 利用缓存设置收藏与未收藏按钮切换

继承上一个详情页面的 js

<view class="circle-img">
    // 为真显示
    <image wx:if="{{collected}}" catchtap="onColletionTap" src=""></image>
    // 否则反之
    <image wx:else catchtap="onColletionTap" src=""></image>
</view>

Page({
    data:{},
    onLoad:{
        this.data.currentPostId = postId; // 临时中转
        // wx.set 设置缓存
        // wx.getStorageSync 获取同步缓存，读取所有缓存状态
        var postsCollected = wx.getStorageSync('posts_collected')
        if(postsCollected){
            //拿到其中一个的状态，并完成数据绑定
            var postsCollected = postsCollected[postId]
            this.setData({
            /* 生产一个 postsCollected 绑定到 collected 开始生效，从而结构中的collected能够读取到，
            从而控制显隐 */
                collected: postsCollected
            })
        }else{
            // 当不存在时
            var postsCollected = {};
            // 状态为false
            postsCollected[postId] = fslse;
            // 把postsCollecte的值放到缓存中
            wx.setStorageSync('posts_collected' , postsCollected);
        }
    },
    // 切换操作
    onColletionTap:function(event) {
        // 通过缓存来确定是否已收藏
        var postsCollected =  wx.getStorageSync('posts_collected');
        // 拿到当前的一个状态，通过变量来传递参数（data）,this.data.currentPostId获取postCollecteds的值
        var postCollecteds = postsCollected[this.data.currentPostId];
        // 取反操作的意义是 收藏变成未收藏 ， 未收藏变成收藏
        postCollecteds = !postCollecteds;
        // 更新变量，整体缓存对象(postsCollected)的某一个文章(currentPostId) 的缓存值
        postsCollected[this.data.currentPostId] = postCollecteds;
        // 更新文章是否收藏的缓存值
        wx.getStorageSync('posts_collected' , postsCollected);
        // 更新data数据绑定，从而实现切换图片
        this.setData({
            collected: postCollecteds   // 当前的值collected 是 postCollecteds
        })
    }
})