rn 第三方存储库react-native-storage整合异步存储组件Storage

超、凢脫俗 2021-07-25 02:34 834阅读 0赞

1、安装
    	yarn add react-native-storage
    	yarn add @react-native-community/async-storage
    	
    2、导入
    	import Storage from 'react-native-storage';
    	import AsyncStorage from '@react-native-community/async-storage';
    
    3、创建库
    	const storage = new Storage({
    	    最大存储多少条数据
    	    size: 1000,
    	  
    	    存储引擎,指定后会存储到app中
    	    storageBackend: AsyncStorage, // for web: window.localStorage
    	  
    	    数据保存时间
    	    defaultExpires: 1000 * 3600 * 24,
    	  
    	    读取时在内存中缓存数据
    	    enableCache: true,
    	  
    	    当storage中没有响应数据或已过期,会调用该方法
    	    该方法可以通过storage.sync直接修改、require('引入其他文件写好的')
    	    sync: {
    	    
    	    }
      });
    
    4、将库实例添加到全局,在App.js中引入该文件即可
    
      创建全局属性，任意位置都可以调用该实例
      	global.storage = storage;
    
    5、保存
    方式一:根据key存储
    	 storage.save({
            key:'xx', 	不能使用下划线,key永远存在,不受过期时间影响
            data:{
             	键值对
            },
            expires:1000*3000 如果未设置则使用实例对象中的时间戳,null表示永久保存
        })
    
    方式二:根据id和key存储
    	storage.save({
    	  key: 'xx', 不能有下划线
    	  id: 'xxx', 不能有下划线
    	  data: {...},
    	  expires: 1000 * 60
    	});
        
    6、读取
    方式一:根据key读取
    	storage.load({
    	
          	key:'xx',
          	
           	没有读取到数据,调用sync方法
            autoSync:true,
            
            默认为false,等待sync方法提供最新的数据,true,在调用sync方法的同时返回过期的数据,即从本地获取数据
            syncInBackground:true,
                
            给sync方法传递额外的参数
            syncParams:{
                extraFetchOptions:{
                    各种参数
                },
                someFlag:true
            }
            
        }).then((res)=>{
        
            会将data中的数据放在第一个参数里
            res.data中的键名
            
        }).catch(err => {
            
            捕捉没有找到数据且没有sync方法,或者其他异常
            console.warn(err.message);
            switch (err.name) {
              case 'NotFoundError':
                // TODO;
                break;
              case 'ExpiredError':
                // TODO
                break;
            }
          });
          
    方式二:根据key和id读取
    	storage
    	 .load({
    	    key: 'xx',
    	    id: 'xxx'
    	  })
    	  .then(ret => {
    	    
    	    console.log(ret.userid);
    	  })
    	  .catch(err => {
    	    console.warn(err.message);
    	    switch (err.name) {
    	      case 'NotFoundError':
    	        break;
    	      case 'ExpiredError':
    	        break;
    	    }
    	  });
    	  
    方式三:读取key对应的所有id,只针对设置了id的信息
    	storage.getIdsForKey('xx').then(ids => {
    	  console.log(ids);
    	});
    	
    方式四:读取设置了id的所有key为xx的所有信息
    	storage.getAllDataForKey('user').then(users => {
    		  console.log(users);
    	});
    	
    方式五:清除设置了id,所有key为xx的所有信息
    	storage.clearMapForKey('user');
    	
    方式六:根据一组id-key/key读取数据
    	storage.getBatchData([
    		{ key: 'loginState' },
    		{ key: 'checkPoint', syncInBackground: false },
    		{ key: 'balance' },
    		{ key: 'user', id: '1009' }
    	])
    	.then(results => {
    		results.forEach(result => {
    			console.log(result);
    		})
    	})
    
    方式七:根据一组id读取数据
    	storage.getBatchDataWithIds({
    		key: 'user',
    		ids: ['1001', '1002', '1003']
    	})
    	.then( ... )
      
    7、删除
    
     	删除key下的所有内容
          storage.remove({
            key: 'xx'
          });
          
        删除key下的指定内容
          storage.remove({
            key: 'xx',
            data中的键名:对应的值
          });
       
       删除所有设置了key-id的内容
      	  storage.clearMap();

代码示例:

import React,{ Component} from 'react'
    import { View,Text,StyleSheet} from 'react-native'
    
    import Storage from 'react-native-storage';
    import AsyncStorage from '@react-native-community/async-storage';
    
    //创建库
    const storage = new Storage({ 
        // 最大存储多少条数据
        size: 1000,
      
        //存储引擎,指定后会存储到app中
        storageBackend: AsyncStorage, // for web: window.localStorage
      
        //数据保存时间
        defaultExpires: 1000 * 3600 * 24,
      
        // 读取时在内存中缓存数据
        enableCache: true,
      
        //当storage中没有响应数据或已过期,会调用该方法
        //该方法可以通过storage.sync直接修改、require('引入其他文件写好的')
        sync: { 
          // we'll talk about the details later.
        }
      });
    
      //创建全局属性，任意位置都可以调用该实例
      global.storage = storage;
    
    export default class App extends Component{ 
    
        UNSAFE_componentWillMount(){ 
            //保存
            storage.save({ 
                key:'set', //不能使用下划线,key永远存在,不受过期时间影响
                data:{ 
                    name:'jeff',
                    pass:'123'
                },
                expires:1000*3000 //如果未设置则使用实例对象中的时间戳,null表示永久保存
    
            })
        }
        componentDidMount(){ 
            //读取
            storage.load({ 
                key:'set',
                //没有读取到数据,调用sync方法
                autoSync:true,
                //默认为false,等待sync方法提供最新的数据
                //true,在调用sync方法的同时返回过期的数据
                syncInBackground:true,
                
                //给sync方法传递额外的参数
                syncParams:{ 
                    extraFetchOptions:{ 
                        //各种参数
                    },
                    someFlag:true
                }
            }).then((res)=>{ 
                //会将data中的数据放在第一个参数里
                alert(res.name)
            }).catch(err => { 
                //捕捉没有找到数据且没有sync方法,或者其他异常
                console.warn(err.message);
                switch (err.name) { 
                  case 'NotFoundError':
                    // TODO;
                    break;
                  case 'ExpiredError':
                    // TODO
                    break;
                }
              });
        }
        componentWillUnmount(){ 
          //删除key下的所有内容
          storage.remove({ 
            key: 'set'
          });
          //删除key下的指定内容
          storage.remove({ 
            key: 'set',
            pass:'123'
          });
        }
        render(){ 
            return(
                <>
    
                </>
            )
        }
    }