20. 尚硅谷_微信小程序_收藏功能逻辑实现.avi原创

好，咱们这节课主要给大家讲一个东西叫数据，呃，存储，OK，来来到我们这个官网上啊，官网上这是不是有个数据缓存啊，点开这个上来就有一个set storage，那这些东西应该是好理解，它特别像我们H5里边的什么对LOCAL30 sorry这些。OK，我们来看，呃，功能线不看，直接看这一段，这一段前面特别线只不过是多了个seek seek这个单词什么意思？Seek是同步的吧，那说明上面这个是什么啊，是异步的，嗯，是异步的，有同学说seek不是异步嘛，不是啊，而seek才是异步。OK，那那这个时候我们来看这个到底是干嘛的好，它的作用呢，是将数据存储在本地，缓存指定的进度。

这是一个异步接口。也就是说，哎，这个方法可以异步去在本地缓存数据，注意里面需要传一个对象，那在这里边K是什么，这不用我说了吧。我们在本地存储数据，是不是应该需要一个K，需要一个value啊，K就是你缓存数据的标识，那下边这个贝塔，那这就是我们需要存储的数据，哎，下边这些这就不用说了，咱也说过成功失败还有一个complete OK，那这个时候我先拿过来这个方法。反过来这个方法，你说那来到我们当前，那你说我都要考虑什么事情。首先我这一点击，你是不是应该从一个状态到本地啊。

能懂吗？没理解吗？保存到本地的话，那点击的方法是不是在这儿，所以接下来我们要做的是什么，缓存数据到本地吧，用到的方法呢，就是这个。嗯，只不过这个对象我们自己写。OK，我们都需要哪些呢？首先是不是需要有个K，还需要什么贝塔？对吧，还有一个是什么。Data，我先占个位啊，还有一个什么，应该肯定要有个。成功的回调吧。这没问题吧？嗯。OK，我们先把这些基本的写好，基本的写好，其实在这我上来就用什么了，在这是不是上来就用箭头函数。

那你现在需要准备一些东西，K啊K，我们可以自己去写，我就叫那个C。关键这个贝塔怎么去除？你自己去分析一下，你现在想把谁捅进去。嗯，ED，有同学说把这个状态放进去是不是就可以来，那我先把这个状态拿过来，来多粘东西了。Collected，拿过来，放到这儿。OK，那在这呢，我可以去cons.log。啊，其实在这打不打印都行，缓存啊成功，因为啥我们可以在调试器看到。来在这呢，又得讲一个，在这个调试器这一列里边，我们需要看缓存数据的话，在这。

这上面有个story OK，我点过来，大家看现在有数据吗？没有，哎，这个时候我们先来看，这是个P，这是个value值啊，这是什么，它也是类型吧，来我们点击到我们的这个详情的页。那这个时候注意看我点它。重进来了。对的吧，哎，看上去很简单，你看我再点这是不是动态置为false啊，没问题。来，我再点没出，也就是说下次我们再进来再去去这能你能存进去是不是就能读他的数据啊，提前读一下，然后去修改一下这个状态是不是就好了，看上去好像很简单，他有这样一个问题。我还得点一下，你看我当前页面的生存状态是处对吧，那假如说用户有这样的操作，我点这个。

我点这个你不做任何处理去这读的话，是不是也没错啊，那也就第二个页面上来，是不是就是收藏，请问我刚才有点击他们没有，那这样的话，你这个状态是错的。哎，出现这个问题的本质原因是啥？我们刚刚没有考虑多个页面之间都需要有这个状态，但是呢，你在存储的时候，你只列了一个，只列了一个状态，这样的话导致什么多个这个文章共用这个状态了。所以说这样不行。这样不行。我们在存储状态的时候，应该给人家加一个标识。而这个标识用来干嘛呢？用来标识当前我在哪一篇文章里面。你说能快速标识一个文章，在哪篇页面里面用什么来标识最快通过它的下标，是不是最快下标，咱们有没有，有还记不记得，我刚刚故意在这去更新了一下它的index，哎，这都是有套路的。

那这个index现在有了，也是index，我能拿到了，我们现在最理想的缓存数据应该长这样才对，你不应该直接是不而出，你应该是个对象，对象里面的K是下标值呢是。负或者说是false，比如说我们是这样的，这个答案能理解吗？那这样的话，这个不就是K吗？而我们在读的时候，再通过对应的下标一找这个布尔值是不是就好了？没问题，那接下来你说我要干嘛？

首先这肯定不能直接用一个布尔值了，它应该是个对象对吧，那这个对象我们能不能提前给他准备一下呢？那这个OB之间等于个对象对吧，然后呢。有同学说OB接点index等于。我我就你们等于的值肯定是这个吧。就等于那个布尔值吧，我能这样想。我先问一下，呃，问一下大家对象里面的属性的类型是什么。属性名的类型肯定字符串吧，那如果说你直接点一个index，你将来的对象长这个样子，Index。对应的值是处，请问这个东西能标识吗？我能直接等于index吗？不能，为什么？因为index是一个变量。

如果说你直接点它的话，这是相当于是个字符串。啊，当我们要给对象添加一个属性，它是变量的时候怎么办？很好使用中括号的形式。那现在这个整完才是这样的一这个吧。而我们要做的是吧，把这个对象扔进去就可以。来，那这个时候保存一下，打开调试器，我们来看这个不需要动态，因为我在一点是不是把之前的覆盖了。嗯，一我们在这说没拿一，那嗯，对，拿一个吧。嗯，我在他的上面去了，呃，来个我换一种写法看看大家能看懂吗？这是么？对象的解构赋值，OK，看保存一下，OK，来点击一下。

对不对，没有问题，并且你看着我再给你换一篇文章，往下一篇这个吧。我再点。有问题吗？有为什么？我刚刚第一篇文章很明显他是不是状态被出版，我想问你现在还有那个状态吗？没有来再来分析为什么会出现这个情况啊。因为啥，因为这一步。你每次上来要从的对象，你是初始化一个空对象啊，那我这个对象里面是不是永远只有这一个属性啊。

所以你不能初始化空对象。你应该是从这个下边去拿人家之前的对象。大家懂我的意思吗？那假如说我这之前对象里面就存了个零对应的是处，你能修改我这个吗？不能，你是不是只能是在它的基础上，你比如你去添加一个二也没处呀。那那在这儿的话，我我们在这儿不可行啊，不可行，我给大家把这些容易犯错误的地方也写上，这不可行，不可行的原因是什么？它会覆盖之前的状态。哎，我们把这个注掉它OK，既然这个不可行，来我重新改一下它。Let一个O，并且应该是把去本地存储这去读一次才对啊对吧，那如何去读状态呢？很官网，你sat设置个get读取，这不用说了，嗯，因为刚刚我们用的是异步从进去了，现在我也给大家先用异步去读，待会儿咱们再练同步。

都练一练，OK get，你需要整一个什么？K，这不用说吧，嗯，K你是不是通过K才能取对应的值来。这样我是。在这写。那这个我们先把它扔掉，这这是不是应该有个对象，首先里面这个K能不能随便写。我能瞎写吗？不能瞎写，这个K是不是必须和你之前存的是一样的，那接下来呢，肯定要有个success，因为我是不是要在这个成功的回调去拿数据啊，所以这是不能申明一个data OK，我们在这去诶。

cons.log这个data，我们看一下这个data能不能拿到，并且呢，我可以去打印一下它的数据类型。CTRLS，保存一下，我们直接来到lo来让这个页面过来。呃，这个我要点击一下是不是才能获取啊走。OB接口。我刚这不把OB扔掉了，先给给他一个，先给他一个。是这个吧，状态是OK，先看数据类型对象，我为什么要看一下数据类型呢。因为你要我接下来肯定要操作这个数据，万一识字母串的，所以我们下意识的就要去看一下它，OK，那这个时候我们接下来看一下数据在哪放着，它里面是不是又分装类型，Data塔得塔，这这不二维处正好对应的什么，咱们现在哎。

那这个不对啊，他怎么给的是二位数啊。啊，先不管这个现在是不是能拿到数据啊，待会我需要把它去清除掉了，那这个数据拿到了，你说我要干嘛。我们现在拿数据的目的是不是给OB间赋值，然后是不是走下边这一套，所以说你下边这一套东西不应该写在它的外边。懂我的意思吗？因为他是个异步的，你如果写在外边的话，我们你上来这能拿到这个值吗？肯定拿不到吧，所以我们是不是应该把这一套逻辑放在他这个成功的回调里面啊。

在这里边我是不能保证拿到塔中的数据。那这应该怎么写贝塔点这个名字起的不太好是吧，来，那这个时候呢，我们在这给它换成啊贝塔是吧，因为这也很有可能是个负数，第2DATA塔。然后呢，点点什么呀，你是。没理解我的意思啊。刚刚那个对象里边。是不是有对塔属性啊，现在这应该是对的吧，零没错。我得塔点塔，是不是找到这一层对象了？关键是我能直接点点一个零吗？肯定不能。点是不是直接取到这个对象了，对象拿到，接下来我这一步我问下答。

你说我直接这样写对不对。我们在这拿到的对象长什么样？零猫啊处。之前有同学问过这样一个问题，说老师这如果在这个零的话，是不是又把之前的给修改了。有影响吗？如果是我这ex非是非零值，比如说1234，那这个时候它是不是相当于是给里边去添加了一个值。这样能懂吗？如果说这是零了。我有没有可能是连线说。有没有可能是零啊，有可能吧，它是不是会覆盖，就是把这个值再修改一下，哎，所以说下边逻辑应该是能跑通才对，CTRLS咱们来保存一下，大家看一下。来这是不是有一个值啊，没问题，零为处来，那这个时候我们往下走走吧，来到这。

注意看重点是会不会把原先这个给覆盖掉走。对的吧，哎，那我再一点是不是会修改当前三对应的这个值啊，那现在这个数据我们就成功了，缓存成功了，那你说接下来要干嘛呀。那假如说咱这个三这现在是不是没错啊，那我后退我再进来，你这必须是显示的是这个高亮的图片才对吧？来，那你说我什么时候去做这个事情。首先就是用户看到之前你越快越好了，那这个时候咱是不是又能想到生命周期函数啊，哎，而最快的是哪一个呢？Onlo是不是在这，那现在我们应该是干嘛，这应该是根据本地缓存的数据判断啊，用户什么是否来收藏当前的。

文章。那也就是说上来我应该什么，先去读取一下本地缓存的数据啊，哎，这一把呢，我们可以用那个同步。同步和异步最明显的一个区别是同步没有回调。第一步有回调，哎，那这个时候呢，我们用哪个呢？来现在咱是不是要获取啊，是不是拿它呀，注意看还有什么回调吗？参数是不是只有一个K呀，OK，来拿过来走，你那这个K呢，不用说了，是谁呢？Is is collected，不要拼错了，那既然没有回调，说明它是不是直接有个返回值啊，所以呢，我在这let一个detail storage等于它。

OK，那那这个时候我去lo这个detail，其实打不打印都行，我肯定能拿到了，对吧，来给大家看一下吧。我们重新编译一下来到lo，注意这一次是我一进来一加载，是不是就能拿到那个数据啊。这不出来了吗，下面。对的吧，拿到了以后你说要干嘛呀。啊，对，我们应该是根据我当前这篇文章的index是否判断我是否收藏过呀，啊，那也就是说接下来我们要做的事情是。判断用户是否收藏了吧，这个守成OK，怎么判断呢？E，如果说这个对象它的index为说明什么。

一代我不需要取，因为我在这是不是有啊，所以咱是不是能拿过来直接用啊。这个index，这有两种情况。哎，其实严格来说有三种。哪三种啊？True和false是两种，什么意思啊？我打个比方，如果说我的index为零，这是不是有可能是处，有可能是false。其实还有一种对。我第一次进来，我以前没从来没点击过这儿的值应该是什么？就是里面根本没有涉及过打，呃打个比方啊，假如说我这index现在为一。

我问你，我问对象取属性为一的值有吗？没有呢，他应该是什么。对，And find啊，我是希望大家能自己分析出来这些东西。对吧，那其实不管是安find还是false，是不是都可以表示用户他没有收藏这篇文章，哎，所以呢，我们判断如果说他没处证明。哎，这是收藏过，这没问题，那其实一旦进了L是不是就被收藏，其实我们只是不只需要去处理一个收藏就行了。为什么？因为我默认什么就是为什塔。如果说这为处，我得去做一件事情，点S贝塔修改谁的值呢？Is collected，为什么为处？

OK，那这个时候我们再来看一把，注意看我们现在缓存哪个了，一个是零的，一个是三的，他俩是不是没错啊，那也就是说现在我点击这个进去，它应该高亮才对。对的吧，而我点击第二篇的话，它肯定是灰色的才对。还有一个。第三第四是不是应该是他他应该没出吧。不是他哦，那是下还下边是不是还有一个啊是这个。对的吧，没有问题啊，写到这儿，可能有的同学说啊，好不容易把这个做完了，你再去检测检测。嗯，现在有这样一个，这有个新缓存对吧。我们这上来应该有数据吗。就初始化是应该没有才对吧，来我们还原一下，重跑一遍，注意我这儿这不是可以清除缓存吗？就把第一个数据缓存清了，这不是把下面的清掉了吗。

OK，清掉了以后看着啊，CTRLS保存一下。或者点击这个，让他重新去编译一下，大家看到我点击过来。是不过来了，我开一点。收藏可收藏，你看这儿。有吗？没有，其实我告诉你，中间有环节出问题了。哎，有同学想到了，看着啊。这其实有个打印输出。看上去没什么内容，但是这是不是占了一行的位置啊，注意看第几行打印的。GTLS第三行来，我们找一下第三行。这个对吧，上来这如果说没有收藏的话，是不是就是一个空的什么都没有在这其实问题还不大，我告诉你问题出在哪。

在这儿。一定要考虑上来，初始化的时候，我可以给大家去打印一下，你看着吗，来点log。嗯，哎，这个是我们点击获取的数据，OK ctrl保存一下。来，打开调试器过来。哦，你看现在他有反应吗。没有反应，因为上来本地这有数据吗？这没有这没有，但是你点击的时候，你还想当他是一个对象操作，那就不行。我们应该去做一个预处理工作。如果说用户刚进来没有，你说我应该干什么事情，对，还好。

上来咱们是不是在这儿判断过，如果说没有，我应该。让它成为一个空对象才对，那接下来是吧，再去操作空对象就没什么问题了啊，那这个时候我们应该怎么去判断呢。E啊，其实我们可以在这儿，如果说这个家伙他没空，我一取反是不是就进来了，你说应该干嘛？我们应该在缓存中初始化空对象，微信点set storage，我们可以用一个这个是不是同步啊，K叫什么。Is collected值呢？直接给他一个。空对一下来，我们再来跑一遍啊，CTRLS保存一下，大家看现在什么都没有来，我让他进来。

有没有发现这多了个空对象啊，有了对象以后，我再一点击是不是对象属性就能操作了，走是不是存进来了再走，哎，那到现在为止呢，我们才把这个收藏的功能做完了。之前在北京有个同学问了我个问题啊，我觉得还挺好，嗯，他是这样考虑的，大家看。呃，直接和一下啊，我知道那个那个倒不是重点，那是你写法的问题，有的同学说这设计的问题，有的你看咱们是不是保存了一个对象，我通过k value6的形式是不是整进去的，有的同学说你能不能这样，就是我每一次点击一个页面，我分别存一次。

就是说你这个K不应该统一用它。哎，对，这个K是不是直接用1X啊，Y6值是不是对应的可以是布尔值啊。懂我的意思吗？那也是一种方式啊，呃，但是那样有什么不好的地方，其实我也没说他不好，可能效率比较低。哪低了呢？你如果说以那种方式存的话，那这缓存数据应该是这样，一处可能是2FALSE，是不是排了好几个，那如果说我要操作母音的话，你单独得拿出来。单独找，而还得每次通过下标什么找到对应的这个数据啊啊，如果说你对象的话，我处理整体的数据好处理啊。我要把这个收藏未收藏的缓存直接清掉的话，我可以怎么清呢？咱们现在是不是可以通过is collected直接把这个对象清除掉，如果说你分别缓存的话，你得怎么清啊？

你得一条一条的通过下标去找到它清掉。哎，这就是为什么我没有那样写的原因。嗯，挺好，OK来，呃，我先把这个停一下。