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

目录：
废话，写在开头
写缓存，程序结构及详细说明
贴出的写缓存代码。
读缓存，程序结构及详细说明
贴出的读缓存代码
贴出的删缓存代码及详解说明
废话：
正式涉足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', Math.random() * 700)
                    }
                    var findkey = this.state.InputData.workInspectionSeqNo
                    var LocalInspectionList = []
                    var index = -1
                    AsyncStorage.getItem(getname)
                        .then((data) => {
                            try {
                                if (data) {
                                     //var decodeData = CryptoJS.AES.decrypt(data, this.props.userData.personalKey).toString(CryptoJS.enc.Utf8);
                                     //LocalInspectionList = JSON.parse(decodeData)
                                    LocalInspectionList = JSON.parse(data)
                                    console.log(LocalInspectionList)
                                   if( LocalInspectionList.length==21) //控制整体缓存项在20个,出于性能考虑及资料安全考虑
                                   {
                                       this.dropdown.alertWithType('error', '提示', '您的暂存容量已满，暂存失败，请及时处理您的未完成任务！')
                                       //this._EndRunning()
                                       return
                                   }
                                    for (var i = 0; i < LocalInspectionList.length; i++) {
                                            if (LocalInspectionList[i].Key == getname+'_'+findkey) {
                                                index = i;
                                            }
                                    }
                                }
                                if (index >= 0) //判断是否已存在于缓存队列中
                                {
                                    var myDate = new Date()
                                    LocalInspectionList[index].Name = this.state.InputData.merchName
                                    LocalInspectionList[index].Savetime = myDate.toLocaleString() //根据保持时间来判断是否需要刷新未完成任务界面--列表的图片位
                                }
                                else {
                                    var myDate = new Date()
                                    var InspectionListItem = //第一次保存的情况:新建缓存概要项,并插入缓存概要列表
                                        {
                                            Key:getname+'_'+findkey,
                                            type: this.props.saveType?this.props.saveType:this.props.type, //当商户变更或退回时需要特殊处理，判断是否传入保持标志，以保存标志为准
                                            Name: this.state.InputData.merchName,
                                            Savetime: myDate.toLocaleString(),
                                            sheetType:this.state.InputData.sheetType,
                                            Userid: getname,
                                        }
                                    LocalInspectionList.push(InspectionListItem) //单纯列表(不包含详细信息）
                                }
                                var InspectionDetailItem = //新建缓存详情项
                                    {
                                        Key:getname+'_'+findkey,
                                        Data: this.state.InputData,
                                        Checkbox: this.state.CheckBoxValue,
                                        type: this.props.saveType?this.props.saveType:this.props.type,
                                        Name: this.state.InputData.merchName,
                                        PhotoData: this.state.PhotoData,
                                        Savetime: myDate.toLocaleString(),
                                        Userid: getname,
                                    }
                                  // console.log(InspectionDetailItem)
                                var uncode = JSON.stringify(InspectionDetailItem)
                                var incode = CryptoJS.AES.encrypt(uncode, this.props.userData.personalKey)
                                //var bytes = CryptoJS.AES.decrypt(incode, this.props.userData.personalKey).toString(CryptoJS.enc.Utf8);
                                AsyncStorage.setItem(getname+'_'+findkey, incode.toString()).then(() => {
                                    AsyncStorage.setItem(getname, JSON.stringify(LocalInspectionList)).then(() => {
                                        if (show == null) {
                                            this.dropdown.alertWithType('success', '提示', '暂存成功')
                                            console.log(LocalInspectionList)
                                              console.log(InspectionDetailItem)
                                        }
                                       // this._EndRunning()
                                        global.needCheckLocalSave=true //设置检查缓存列表为是
                                    });
                                });
                            }
                                //var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
                            catch (e) {
                                //this._EndRunning()
                                var a = e
                                this.dropdown.alertWithType('error', '提示', '缓存失败，加密秘钥不匹配')
                            }
                        })
                //}
                // else {
                // this.dropdown.alertWithType('error', '提示', '您还未获取到工单号,无法暂存')
                // }
            }
        });
},
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊我是读缓存和写缓存的分割线＊＊＊＊＊＊＊＊＊＊＊
读缓存，程序结构如下：
_fetchData() {
    part1:准备工作
    part2:读取缓存数据，并显示到界面中
｝
写缓存中说过，由于不同种类的数据都会写在缓存中，只是使用不同数据列保存而已。这里读缓存的时候，实现的是读取缓存中两种不同的数据列中的内容，并将他们揉合在一起共同显示到界面上。
part1:准备工作
                
                
915行声明的cacheResultList目的是用来存储两个列表分别读取出的缓存项，并将他们揉合在一起。921和924两行的LocalInspectionList和LocalTrainList是全局变量，在函数外部代码文件的开头进行声明，分别是缓存中存储的两个数据项，代表缓存的巡检工单数据和缓存的培训工单数据。
926至943分别准备将要读取缓存时使用的数据列的名字。因为我写缓存的时候，数据列命名规则使用的是用户注册身份证号＋数据列名字后缀作为数据列的名字，因此这里准备读取数据列名字的时候使用统一命名规则。
part2:读取缓存数据并显示到界面中
读缓存数据分为两部分，因为要读取两种数据列，故分两次get
                
                
945行按照准备的数据列名字获取数据，上面准备工作中937行准备的getname代表的是_LocalInspectionList的数据，故951行将读取出的数据存入全局变量LocalInspectionList中。
952至958行实现将数据追加存储到cacheResultList的itemsCache中。
961行至965行使用setstate将cacheResultList的itemsCache中的数据存入datasource，并使用cloneWithRows按照定义格式显示到界面中。
这里结合界面渲染的render函数，再解释一下961至965中各state的意义，在界面渲染的render函数中，定义界面显示列表。如下图
                
                
其中2277行到undoneTaskCount表示缓存中存储到未完成数据项的个数，值是在上面的962行中写进去到，将缓存揉合项cacheResultList的itemsCache的列表长度写入。
963行读取数据成功，设置显示列表到状态为TRUE，如果读取数据为空，即没有可以显示到项，则不显示列表，设置showlist为FALSE（如第977行）。列表是否显示，在渲染时，通过2279行进行判断。
964行将揉合的数据结果cacheResultList.itemsCache放到datasource中。在渲染函数到2281行利用listview的datasource属性，将其显示出来。
这里插句嘴，所有到这些setstate,都是在组件的getInitialState中定义的。
注意，由于这里实现的是读取两个列表，因此按照两个列表的命名规则，要分别读两次数据，将读出的数据统一都存在cacheResultList的itemsCache中，。全部代码贴出来如下。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
贴出的读缓存代码
    _fetchData() {
        //
        // .removeItem('LocalInputingList');
        //if(global.needCheckLocalSave===true)
        //{
        var cacheResultList = {
            itemsCache:[]
        }
        var that = this
            LocalInspectionList = [];
            var getname
            LocalTrainList = []
            var getnametrain
            if (this.props.userData != null) {
                getnametrain = this.props.userData.registUser + '_LocalTrainList'
            }
            else {
                getnametrain = 'LocalTrainList'
            }
            if (this.props.userData != null) {
                getname = this.props.userData.registUser + '_LocalInspectionList'
            }
            else {
                getname = 'LocalInspectionList'
            }
            AsyncStorage.getItem(getname)
                .then((data) => {
                    if (data != null) {
                        try {
                            //var decodeData = CryptoJS.AES.decrypt(data, this.props.userData.personalKey).toString(CryptoJS.enc.Utf8);
                            LocalInspectionList = JSON.parse(data)
                            var itemsCache = cacheResultList.itemsCache.slice()
                            if (LocalInspectionList.length > 0) {
                                LocalInspectionList = _.compact(LocalInspectionList)
                                console.log(LocalInspectionList)
                                itemsCache = itemsCache.concat(LocalInspectionList)
                                cacheResultList.itemsCache = itemsCache
                                LayoutAnimation.spring()
                                that.setState({
                                    undoneTaskCount: "(" + cacheResultList.itemsCache.length + ")",
                                    showlist: true,
                                    dataSource: that.state.dataSource.cloneWithRows(cacheResultList.itemsCache)
                                })
                            }
                        }
                        catch (e) {
                           // this.dropdown.alertWithType('error', '提示', '解析缓存出错了')
                        }
                    }
                    else {
                        LayoutAnimation.spring()
                        that.setState({
                            undoneTaskCount: "",
                            showlist: false
                        })
                    }
                })
        AsyncStorage.getItem(getnametrain)
            .then((data) => {
                if (data != null) {
                    try {
                        //var decodeData = CryptoJS.AES.decrypt(data, this.props.userData.personalKey).toString(CryptoJS.enc.Utf8);
                        LocalTrainList = JSON.parse(data)
                        var itemsCache = cacheResultList.itemsCache.slice()
                        if (LocalTrainList.length > 0) {
                            LocalTrainList = _.compact(LocalTrainList)
                            console.log(LocalTrainList)
                            itemsCache = itemsCache.concat(LocalTrainList)
                            cacheResultList.itemsCache = itemsCache
                            LayoutAnimation.spring()
                            that.setState({
                                undoneTaskCount: "(" + cacheResultList.itemsCache.length + ")",
                                showlist: true,
                                dataSource: that.state.dataSource.cloneWithRows(cacheResultList.itemsCache)
                            })
                        }
                    }
                    catch (e) {
                        // this.dropdown.alertWithType('error', '提示', '解析缓存出错了')
                    }
                }
                else {
                    LayoutAnimation.spring()
                    that.setState({
                        undoneTaskCount: "",
                        showlist: false
                    })
                }
            })
        //}
    },
＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃我是读缓存和删缓存的分割线＃＃＃＃＃＃＃＃＃＃＃
删缓存就简单多了，来看截图
                
                
因为我的应用中缓存里有两个数据列用来保存不同的缓存数据，所以1074行根据传递进来的Key值是否包含数据列“LocalInspectionList”的名字来判断待删除项是属于数据列LocalInspectionList还是LocalTrainList。在if和else分支中使用for循环来逐项查找数据列中每个数据项的key值与传递进来的Key值是否相等，如果相等，利用该index在1080行将数据列的该项删除。1081行拷贝更新数据列。
同时利用1095行调用AsyncStorage的removeItem直接根据Key值删除缓存项。上面删除列表中的数据项的原因是读缓存更新的时候还是会从列表中读取，因此列表项和AsyncStorage要同步都删除。
删除过后记得再调用一遍读缓存函数进行界面的更新哦！！
贴出的代码如下：
 removeItemFormAsnyList(Key)
    {
        if(Key.indexOf("LocalInspectionList") >=0){
            for (var index = 0;index<=LocalInspectionList.length;index++ ) {
                if (LocalInspectionList[index].Key == Key) {
                    break
                }
            }
            delete LocalInspectionList[index]
            LocalInspectionList = _.compact(LocalInspectionList)
        }
        else{
            for (var index = 0;index<=LocalTrainList.length;index++ ) {
                if (LocalTrainList[index].Key == Key) {
                    break
                }
            }
            delete LocalTrainList[index]
            LocalTrainList = _.compact(LocalTrainList)
        }
        LayoutAnimation.easeInEaseOut();
        AsyncStorage.removeItem(Key)
        LayoutAnimation.spring()
        this._fetchData()
}