React Native APP开发写缓存和读缓存以及删缓存

最新推荐文章于 2024-08-18 10:39:18 发布

我们敲代码的不懂这个！

最新推荐文章于 2024-08-18 10:39:18 发布

阅读量1.3k

点赞数 1

分类专栏：开发那些事文章标签： react native

本文链接：https://blog.youkuaiyun.com/SHUYANSAMA/article/details/119636207

版权

本文介绍了在React Native中使用AsyncStorage进行数据缓存的操作，包括写缓存、读缓存和删缓存的详细步骤。通过示例代码展示了如何准备、判断缓存是否存在、加密存储和错误处理。同时，文章也提到了读取缓存时如何合并并显示两种不同类型的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版权归作者所有，任何形式转载请联系作者。

目录：
废话，写在开头
写缓存，程序结构及详细说明
贴出的写缓存代码。
读缓存，程序结构及详细说明
贴出的读缓存代码
贴出的删缓存代码及详解说明

废话：
正式涉足RN这个大坑，据说前辈光是安装和配置文件就卡了一两天，搞好以后给我们写了个安装跳坑文档，然后就开始对着视频自学RN了，不得不说，确实强大，有种搞定RN则前端开发世界任我遨游的错觉，当然了，前提是搞定了RN。学RN的同时还同步学习了下JS，兜兜转转写出来的程序我自己都怕。。。不过好在现在在前辈和同事还有视频课程等的帮助指导下，现在都捋清楚了。所以想陆续记录分享一些啦～本文程序举例使用ES5编程规范

首先，读缓存和写缓存，当然要用到AsyncStorage以及InteractionManager
导入引用文件：
var AsyncStorage = ReactNative.AsyncStorage
var InteractionManager = ReactNative.InteractionManager

写缓存，程序结构如下：
    _saveToLoacl(show) //被调用的写缓存函数，最前端下划线表示该函数为私有函数
    {
    InteractionManager.runAfterInteractions(() => {
    part1:准备工作
    part2:判断将要缓存的内容是否已在缓存队列中，有则更新，无则新建
    part3:将数据加密，插入缓存
    part4:出错处理
});
｝
下面针对程序结构的四个部分分别进行详细说明
part1:准备工作

因为缓存中可以存储许多种类的信息，不同的信息使用不同的列表。所以getname为数据即将存储在缓存中的列表的名字；findkey为该数据项在getname缓存列表中的标志项，这里使用工单号，反正不会重复，可以反查就行。
1815行声明一个新的数据表，该表名字与getname设置的表名相同，与1816行声明的index都是用于接下来判断缓存数据是否已存在于缓存中。

part2:判断将要缓存的内容是否已在缓存队列中，有则更新，无则新建

1817行将缓存中名为getname的数据列表读出来，在1826行赋值给我们之前新声明的数据表LocalInspectionList；1828至1833行控制缓存项不得超过20个。
1836行在for循环中判断，缓存中的已有的数据列，是否包含了本次缓存的数据标志项，如果已经包含，则将该数据项所在数据列表中的下标赋给index。

for循环过后，如果index大于等于0，则本次缓存数据已经存在于缓存中，更新写缓存时间。如果index小于0，则需要新建一个缓存数据项。

part3:将数据加密，插入缓存

1875和1876行将新建的缓存详情项InspectionDetailItem进行AES加密编码。
如图1879行使用AsyncStorage.setItem（＊1，＊2）将数据按照数据列表名＋标志项（即getname+'_'+findkey）进行存储，其中＊1缓存项存储名称，＊2表示待存储数据。
1883行的show为_saveToLoacl被调用时传进来的数据，暂存完成时为空。

part4:出错处理

跟着前方的try写的catch，缓存出错用来提醒用户缓存失败。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

贴出的写缓存代码。
_saveToLoacl(show)
{

        InteractionManager.runAfterInteractions(() => {
          console.log(this.state)
          console.log(this.state.ViewMode)
            if (this.state.ViewMode != true) {
                    var getname
                    if (this.props.userData != null) {

getname = this.props.userData.registUser + '_LocalInspectionList'

                    }
                    else {
                        getname = 'LocalInspectionList'

}

if (this.state.InputData.workInspectionSeqNo == "") {
this._changeInputData('workInspectionSeqNo',