微信小程序入门（七）：缓存数据-单条数据

Posted 2023-05-16

参考技术A 微信小程序的编写中，涉及到有些业务场景需要将数据缓存到本地，则微信小程序api提供了两个接口函数，

wx.setStorage可以将数据缓存在本地指定的key中，如果本地缓存已经存在指定的key，则会覆盖该key对应的内容，这是一个异步的接口，在调用时会涉及到成功，失败，完成三个状态，

与wx.setStorage唯一不同的就是wx.setStorageSync是同步进行的，所以不会涉及到成功，失败，完成等回调，但是在使用时需要使用try.......catch....来捕获异常；

现在编写一个将字符串缓存本地的例子

编译项目，点击缓存按钮：

现在改变缓存的内容，但是缓存的key保持不变

可以看到第二次的内容把第一次覆盖了。

将内容缓存到本地之后，将其从本地提取展示出来，则可是使用微信小程序api提供的两个接口：wx.getStorageInfo(Object object)，wx.getStorageSync(string key)，与缓存同样，读取缓存也分同步和异步；

我们将刚刚存储到本地的数据展示到页面上：

编译项目，点击按钮获取缓存数据并将其展示到页面上。

完成了本地数据的缓存，获取，则接下来就是关于缓存数据的清除，同样微信小程序api也提供了可使用的接口，

至此微信小程序本地保存数据就此结束！

【微信小程序】本地缓存

参考技术A 本地缓存官方讲解：
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 回调函数。