微信小程序(一)使用缓存实现收藏功能

**************利用 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,

    })

 

你可能感兴趣的:(微信小程序(一)使用缓存实现收藏功能)