rn 第三方存储库react-native-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: {
	      // we'll talk about the details later.
	    }
  });

4、将库实例添加到全局

  创建全局属性,任意位置都可以调用该实例
  	global.storage = storage;

5、保存

	 storage.save({
        key:'xx', //不能使用下划线,key永远存在,不受过期时间影响
        data:{
         	键值对
        },
        expires:1000*3000 //如果未设置则使用实例对象中的时间戳,null表示永久保存
    })
    
6、读取

	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;
        }
      });

7、删除

 	删除key下的所有内容
      storage.remove({
        key: 'set'
      });
      
    删除key下的指定内容
      storage.remove({
        key: 'set',
        pass:'123'
      });

代码示例:

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

            </>
        )
    }
}

发布了619 篇原创文章 · 获赞 3 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105227607
RN