微信小程序--本地存储

本地存储分为异步和同步。

设置：

异步：wx.setStorage 

同步：wx.setStorageSync

获取：

异步：wx.getStorage

同滑答隐步：wx.getStorageSync

移除：

异步：wx.removeStorage

同步：wx.removeStorageSync

清除所有：

异步：wx.clearStorage

同步：wx.clearStorageSync

这里给大家以同步为例，

wx.setStorageSync('key','value')

接下来，我们说一下本地收藏功能怎么实现的呢

这是一个列表渲染页面，每一个view点进去举游的详情页面其实是一个页面，只是传不同的id，来赋值不同的数据展示出来而已。

通过JS文件中带参数的跳转，把相应的数信厅据传到详情页中，那接下来就是展示详情页

本地缓存官方讲解：

https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject

演示视屏可以关注公微信订阅号查看(Rabbit_svip)。

样式随便写，主要留意功能。

页面结构

【app.json】

【login.wxml】

【login.js】

【index.wxml】

【index.js】

先看看【app.json】，在pages里面，要把login放在第一，这样在小程序打开的时候，就会先打开login.wxml这个页面。

【login.wxml】页面，第二行的<form>标签里，要加bindsubmit。

这是微信官方文档上写明的事件。在<form>表单提交时，会携带<form>中的数据出发submit事件。

在使用bindsubmit时，记得在input元素上面写明“name”属性。

可以试试，查看一下控制台输出的值。

【login.js】

在点击登录提交表单后，如果登录成功，用wx.setStorage()，把用户名临时存储起来。

存储完渗数成后，跳转页面。胡厅用到 wx.redirectTo

用 wx.redirectTo 进行跳转，是没有返回上一层的路径的。

在login.js这个页面中，用到 onLoad 这个函数（第107行）。作用是监听页面加载。

onLoad里面，用到 wx.getStorage 这个API。作用是检测本地缓存，看看是否有对应的key指定的值。如果有，则调用 success 这个回调丛做首函数。

【index.js】

这个页面设置了一个清除本地缓存的button。

用到 wx.removeStorage 这个API。

这里只要指定key值就行。这样就可以删除掉对应的缓存。

删除成功后，执行 success 回调函数。

即先发起wx.login请求，得到code后经第三方服务器想微陵消信服务器发送请求获取openid，assessToken等敏感信息，这里我们需要以assessToken作为登录状态保持的依据。

1.首次登录小程序，本地存储中还不存在token，即需要发起登录请求得到token，并存到本地存储

2.小程序本地存储中已存在token，但是已过期，即需要再尺差知次发起登录请求以获得token，并覆盖掉本地存储中原先的token

3.小程序本地存储中存在token且有效，即保持登录状态庆芹

---