微信小程序的学习(4)本地存储

这里继续昨日内容,完成本地存储状态,实现收藏了,下次点进来还是收藏的状态。

首先用到这个,这个代表着将数据存储在指定的key中,这里这种方法是异步的api,
在这里插入图片描述
我们先思考:
1。这个东西需要什么:key,data,success
在这里插入图片描述
这个data就是我们保存的状态,也就是data中的isCollected: false

这样是可以保存状态了,但是这样做每个页面都是这个状态,做不到一一对应
2。所以我们改变这个思路,改变成这样{1:true},因为我们能获取到点击进入这个界面的下标,上篇文章获取到了,然后闷闷通过这种形式来实现,但是发现,这样的结果,每进一个界面就会只保存一个界面的状态,做不到这样{1:true,2:false},所以再想办法
在这里插入图片描述
3。我们用这个来读本地的数据
在这里插入图片描述
在这里插入图片描述
其中的datas会返回下面这个,所以我们就饿可以在这个基础上继续存储数据,实现{1:true,2:false},如果出现obj[index]中index是‘1’,与现有的重复,别担心,它会覆盖的,所以这种方法nice
在这里插入图片描述
所以就在此时,我们把这个存进去,完成最终代码
在这里插入图片描述
接下来我们要去更新界面啦,一进来就让用户看到,所以我们选择在onload生命周期那里写,你觉得呢?
首先应该去读一下本地,有没有,是true还是false吧,对吧。
这里我们用同步方法,

在这里插入图片描述
在这里插入图片描述
这是输出结果:
在这里插入图片描述
如果true就下面这样,如果没有或者false就算啦,因为我们最初的就是false
在这里插入图片描述
这里是不是觉得结束了,没错,没有结束,┭┮﹏┭┮
我们清除数据,从头进,会发现问题出现了
我们这里直接去读,第一次进有isCollected吗?没有,所以读不到,就会出现问题,我们要确保第一次进来时候,初始化的时候,有一个这个isCollected,值是{},空对象
在这里插入图片描述
所以再onload那加入判断,如果我没有isCollected这个key,我就存一个,这里用同步的方法
在这里插入图片描述
ok,完成!

猜你喜欢

转载自blog.csdn.net/weixin_46013619/article/details/104714637