AsyncStorage是一个简单的、异步的、持久化的 Key-Value 存储系统，它对于 App 来说是全局性的。有一个极大的缺点就是：只可以存储字符串。也就是说，如果需要将对象或者数组等存入到AsyncStorage中需要先将他们转为字符串。
一、增加
AsyncStorage.setItem('text', '葫芦小金刚', (error) => {
error ? this.setState({ text: '增加失败' }) : this.setState({ text: '增加成功' })
})
二、删除
AsyncStorage.removeItem('text',(error)=>{
error ? this.setState({ text: '删除失败' }) : this.setState({ text: '删除成功' })
})
三、更改
AsyncStorage.setItem('text', '爷爷',(error)=>{
error ? this.setState({ text: '更改失败' }) : this.setState({ text: '更改成功' })
})
四、查询
AsyncStorage.getItem('text').then((value) => {
if (value) {
this.setState({
text: value,
})
}else{
this.setState({
text:'啥也没存'
})
}
})
五、上代码
import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, AsyncStorage } from 'react-native';
export default class TestPages extends React.Component {
constructor(props) {
super(props)
this.state = {
text: '啥也没有',
}
}
render() {
return (
<View style={styles.view}>
<Text style={styles.text}>
{this.state.text}
</Text>
{/* 增加 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.setItem('text', '葫芦小金刚', (error) => {
error ? this.setState({ text: '增加失败' }) : this.setState({ text: '增加成功' })
})
}}>
<Text>增加</Text>
</TouchableOpacity>
{/* 删除 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.removeItem('text',(error)=>{
error ? this.setState({ text: '删除失败' }) : this.setState({ text: '删除成功' })
})
}}>
<Text>删除</Text>
</TouchableOpacity>
{/* 更改 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.setItem('text', '爷爷',(error)=>{
error ? this.setState({ text: '更改失败' }) : this.setState({ text: '更改成功' })
})
}}>
<Text>更改</Text>
</TouchableOpacity>
{/* 查询 */}
<TouchableOpacity style={styles.touch} onPress={() => {
AsyncStorage.getItem('text').then((value) => {
if (value) {
this.setState({
text: value,
})
}else{
this.setState({
text:'啥也没存'
})
}
})
}}>
<Text>查询</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
backgroundColor: '#fff',
width: '100%',
height: '100%',
flexDirection: 'column',
justifyContent: 'center',
alignItems:'center',
},
touch: {
width: 100,
height: 50,
marginTop:50,
backgroundColor: '#0f0',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
touchText: {
fontSize: 20,
color: '#000',
}
});
六、总结
AsyncStorage最大的缺点就是只能存储字符串，因此，在存储对象或数组的时候需要将它们转成字符串的形式存入，这样很不方便。相比之下mobx更具有优势，建议取而代之。
不过，AsyncStorage也有它的好处，例如在开发APP的时候，需要设计这么一个功能：用户登录一次后无需每次登录，这就需要将用户的相关信息持久化的存储在AsyncStorage中。
本来想放一个演示在这，结果电脑上没有相关的视频转gif软件，后续更新吧。祝成功！
