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

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(
            <>

            </>
        )
    }
}