微信小程序中如何实现开发数据缓存 - 行业资讯 - 肥雀云

　　介绍

这篇文章运用简单易懂的例子给大家介绍微信小程序中如何实现开发数据缓存,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强>一、微信数据缓存是什么?

在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦。数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程中,可以直接通过缓存区得到,这样就提高了程序的效率。举个例子。在第二次登录微信时,我们还没有进行登录操作,但是发现我们的头像数据已经渲染到页面中,这就是因为再一次登录时,图片的地址是从缓存区中得到的缘,故在本文中也会对此实例进行操作,微信小程序中的数据缓存可类比js中的localstorage

<强> 1。存入数据

天气。setStorageSync(字符串键,任何数据)

wx.setStorageSync (“name",“张三“)

天气。setStorage对象(对象)

wx.setStorage ({ 　　数据:“李四“, 　　关键:& # 39;name1& # 39; 　　})

当执行了这段代码之后就会发现在调试区存储中出现以下数据

微信小程序中如何实现开发数据缓存

2。读数据

天气。getStorageSync (string键)

 var=wx.getStorage ({
　　关键:& # 39;name1& # 39;
　　})
　　交配制度(e=祝辞{
　　console.log (e.data);
　　
　　})

wx.getStorageInfoSync()得到的是一个承诺对象,因此使用然后方法通过e。数据得到缓存区数据
当执行了这段代码之后就会发现在调试区控制台中出现以下数据

微信小程序中如何实现开发数据缓存

3。删除数据wx。removeStorage对象(对象)

 wx.removeStorage ({
　　关键:& # 39;name1& # 39;
　　})

wx.removeStorageSync(“名字# 39;)

wx.removeStorageSync(& # 39;名字# 39;)

当执行了这段代码之后就会发现在调试区存储中出现以下数据会被删除

<人力资源/>

4。删除全部数据(这里不再细说)

wx.clearStorage () 　　wx.clearStorageSync ()

可以看到上面的多可api可分为两大类,一种是带同步的一种是不带的,其实带同步的是异步api,而不带的是同步api,这也是同步带的这部分api得到的是一个承诺对象,这里以wx.setStorageSync (), wx.setStorage()做以示例

1. wx.setStorage ()

代码如下(示例):在wxml中写入了两个按钮,点击第一个触发函数tongbu,用来演示同步情况

tongbu:函数(){ 　　wx.setStorageSync (“name",“张五“)//同步api 　　var=wx.getStorageSync(& # 39;名字# 39;) 　　console.log(一个); 　　}

最开始名字对应的数据是张三,在这里我们修改为张五,然后读取数据,发现控制台为

微信小程序中如何实现开发数据缓存

说明是单线程顺序执行,在修改了名字后才执行了console.log

2. wx.setstorage ()

代码如下(示例):点击第一个触发函数yibu,用来演示异步情况

yibu:函数(){ 　　wx.setStorage ({ 　　数据:“李柳“, 　　关键:& # 39;name1& # 39; 　　}) 　　var=wx.getStorageSync (& # 39; name1& # 39;) 　　console.log(一个); 　　　　} 　　})

最开始名字对应的数据是李四,在这里我们修改为李柳,然后读取数据,发现控制台为

微信小程序中如何实现开发数据缓存

代码console.log在修改数据之后,但是发现在修改数据过后,一个没有改变,说明这里的wx.setStorage()是异步api,在执行时,无论这里有无完成执行,都会执行cinsole.log

<人力资源/>

加载微信个人信息案例

索引。wxs

/* * index.wxss * */.userinfo { 　　显示:flex; 　　flex-direction:列; 　　对齐项目:中心; 　　} 　　　　.userinfo-avatar { 　　宽度:128 rpx; 　　身高:128 rpx; 　　保证金:20 rpx; 　　这个特性:50%; 　　} 　　　　.userinfo-nickname { 　　颜色:# aaa级; 　　} 　　　　.usermotto { 　　margin-top: 200 px; 　　} 　　　　{形象　　margin-top: 20 px; 　　margin-bottom: 20 px; 　　宽度:50 px; 　　高度:50 px; 　　}