6-6 (难)使用缓存实现文章收藏功能

缓存只要不清除，一直存在，因此可以模拟用户收藏的状态。

本节重点，如何用缓冲模拟收藏和取消收藏的动作。

知识点1、状态图片轮换。没收藏和收藏是不一样的图片，表示不一样状态。没有收藏的时候应该显示的是灰色图片。收藏了显蓝色图片。 要实现两种状态的切换。

jquery的方法：脚本找到image DOM节点，改变img属性。

小程序的方法：没有DOM，只能数据绑定，或者组件的if else。数据优先的思想。

if else方法： 

在post-detail.wxml中写：

如果collected为真，显示第一张图片，否则显示第二张图片。剩下要做的就是在post-detail.js文件里，控制状态变量的真假，来控制显示哪一张图片。如果为真显示第一张，为假显示第二张。

状态变量名没有定义时候，默认为false。也就是未收藏状态。

现在要在onload这个函数里面去取缓冲的读取collected变量值。来决定，到底显示哪个。

假设缓存以这样的状态已经存在post-detail.js中onload中了

接下来要读取缓冲文章收藏与否的状态。

1、首先将收藏状态放在缓冲postsCollected中。加载onload中读取缓冲中的postsCollected。通过var postCollected = wx.getStorageSync('postsCollected')读取所有文章的缓存状态。已经拿到了所有的，现在要读取当前页面的缓存状态，就可以通过var postCollected = postsCollected[postId]读取所有缓存状态中其中一个，也就是当前页面缓存状态。读取当前页面的缓存状态，主要靠id号。onload中id号已经获取到了。就是通过post.js 中，导航跳转时候url:"post-detail/post-detail?id="+postid传递的postid，到post-detail.js中option.id获取的。

2、读取一个对象下的属性的时候，先判断这个属性是不是存在。因为缓冲状态并不一定存在，比如在第一次读取的时候，缓存变量可能还没有生成。所以需要先判断一下缓冲状态是否存在。存在，才能读取。不存在的时候，会转换成false。

3、拿到是否收藏的状态后，开始数据绑定。

注意一下：当某一项状态不存在时候，也就是从未浏览过一篇文章，不是false也不是true，是空的。当没有值，也是false。所以先判断一下是否为空。小细节要注意。

 vbtyuiop数据绑定依然是通过25行setData，26行collected:postCollected，就把是否收藏的状态，绑定到了collected这个变量中。从而在前端的13行能够读取到。

补充完整逻辑，如果所有的文章收藏与否记录都不存在，那么当前页面的文章收藏与否的记录肯定也不存在。建立一个所有文章收藏与否记录，给当前收藏记录设为false。再设置在缓存中。

4、点击图片的相关代码。给两张图片都绑定响应事件onColletionTap。也就是代表是否收藏的那两个图片。在事件里，首先是要获得缓存中，是否收藏的变量posts_collected，表示全部的文章的是否收藏的状态。因为现在要拿到当前文章是否被收藏的状态，因此需要postId。但是postId是在onload中获取的。我们现在定义的事件onColletionTap不在onload中。现在思考一个问题，怎么把postId从onload传递到事件onColletionTap中。这里提供一个思路，使用其他的变量来传递。推测：在本页面，也有data:{}。我用在onload中，先通过this.setData赋值this.data.currentPostId将postId传到data:{}中，然后再在onColletionTap通过this.data.currentPostId读取data:{}中的postId。

5、事件中给postCollected取反，表示之前是取消，现在就收藏，之前如果是收藏，现在就取消。再将postCollected赋值给postCollected[this.data.currentPostId]。这里不需要判断postsCollected[postId]是否存在。3里面已经完成判断。

6、对整体的缓存做一个更新。

7、更新数据绑定。