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(
<>
</>
)
}
}