微信小程序开发本地数据缓存教程

阳光穿透心脏的1/2处 2022-01-14 04:35 808阅读 0赞

微信小程序开发过程中，本地数据缓存是必不可少的一部分。而且本地数据缓存的用途还挺多的，下面微信小程序观察网（[http://www.mpgcw.com][http_www.mpgcw.com]）  
就和大家分享一下微信小程序开发本地数据缓存教程，希望对大家有所帮助！

第一步：读写本地数据缓存

微信小程序为了方便开发者缓存数据提供了读写本地数据缓存接口，读本地数据缓存采用的是wx.getStorage/wx.getStorageSync接口，写本地数据缓存的是wx.setStorage/wx.setStorageSync接口。其中以Sync结尾的是指同步接口。意思是指操作完成之后会立即返回。下面就以示例代码和参数和大家展示一下，如图所示：

读本地数据缓存：示例代码  
![微信小程序开发本地数据缓存教程][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk]

读写本地数据缓存  
![微信小程序开发本地数据缓存教程][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 1]  
写本地数据缓存：示例代码  
![微信小程序开发本地数据缓存教程][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 2]  
写本地数据缓存：参数  
![微信小程序开发本地数据缓存教程][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 3]

第二步：缓存隔离与限制

缓存隔离：微信小程序提供的数据接口会管理不同小程序的数据缓存，不同小程序的本地缓存数据是不同的，需要分开隔离。隔离是为了避免用户数据信息泄露，保证信息安全。

缓存限制：每个小程序缓存空间不能超过10KB.超过10KB的需要通过wx.setStorage/wx.setStorageSync接口写入本地缓存数据会触发fail回调。需要注意的是关键信息不建议放在本地数据缓存，建议放在服务器端长期存储。

第三步：在本地缓存数据里，进行前端页面处理，如图所示：  
![微信小程序开发本地数据缓存教程][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 4]  
第四步：在本地缓存数据里，进行提交保存数据。如图所示：

![微信小程序开发本地数据缓存教程][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 5]

第五步：利用本地缓存数据，进行页面初始化操作。如图所示：

![微信小程序开发本地数据缓存教程][watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 6]

以上就是对微信小程序开发本地数据缓存教程基本介绍，大家如果对本地数据缓存不太清楚，可以根据以上的步骤进行演练。多操作几次就熟悉了。

转载于:https://blog.51cto.com/14217559/2355666

[http_www.mpgcw.com]: http://www.mpgcw.com
[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk]: https://s1.51cto.com/images/blog/201902/27/7986227d186c13e63513ab862f6cac55.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 1]: https://s1.51cto.com/images/blog/201902/27/592d3f645a3d0517a3f10a4634184e2d.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 2]: https://s1.51cto.com/images/blog/201902/27/34330c382814271dbac4bd89de3c331d.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 3]: https://s1.51cto.com/images/blog/201902/27/74eea6cb33cff1987ab5dac298b9e8e8.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 4]: https://s1.51cto.com/images/blog/201902/27/574e5c5750573261e529cfbfa47c7652.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 5]: https://s1.51cto.com/images/blog/201902/27/3754774d368331705277457e71d5dabf.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[watermark_size_16_text_QDUxQ1RP5Y2a5a6i_color_FFFFFF_t_100_g_se_x_10_y_10_shadow_90_type_ZmFuZ3poZW5naGVpdGk 6]: https://s1.51cto.com/images/blog/201902/27/b20cc99ec4c5489ebfbb0ae32e00d7f4.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=