React Native使用AsyncStorage本地持久化
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native使用AsyncStorage本地持久化相关的知识,希望对你有一定的参考价值。
AsyncStorage
AsyncStorage是一个简单的,未加密的,异步的,持久化,关键值存储系统,是全局的。类似于ios中的NSUserDefault.
存值:
import { AppRegistry, StyleSheet, Text, View, AsyncStorage } from \'react-native\';
try { AsyncStorage.setItem( \'key\', \'shaoting\', (error)=>{ if (error){ alert(\'存值失败:\',error); }else{ alert(\'存值成功!\'); } } ); } catch (error){ alert(\'失败\'+error); }
取值:
try { AsyncStorage.getItem( \'key\', (error,result)=>{ if (error){ alert(\'取值失败:\'+error); }else{ alert(\'取值成功:\'+result); } } ) }catch(error){ alert(\'失败\'+error); }
移除值:
try { AsyncStorage.removeItem( \'key\', (error)=>{ if(!error){ alert(\'移除成功\'); } } ) }catch (error){ alert(\'失败\',+error); } },
完整代码:
import React, { Component } from \'react\'; import { AppRegistry, StyleSheet, Text, View, AsyncStorage } from \'react-native\'; var Mine = React.createClass({ render() { return ( <View style={styles.container}> <Text onPress={this.saveData} style={styles.welcome}> 存值:key=\'key\',存shaoting </Text> <Text onPress={this.getValue} style={styles.welcome}> 取值 </Text> <Text onPress={this.removeData} style={styles.welcome}> 删除数据 </Text> </View> ); }, saveData(){ try { AsyncStorage.setItem( \'key\', \'shaoting\', (error)=>{ if (error){ alert(\'存值失败:\',error); }else{ alert(\'存值成功!\'); } } ); } catch (error){ alert(\'失败\'+error); } }, getValue(){ try { AsyncStorage.getItem( \'key\', (error,result)=>{ if (error){ alert(\'取值失败:\'+error); }else{ alert(\'取值成功:\'+result); } } ) }catch(error){ alert(\'失败\'+error); } }, removeData(){ try { AsyncStorage.removeItem( \'key\', (error)=>{ if(!error){ alert(\'移除成功\'); } } ) }catch (error){ alert(\'失败\',+error); } }, }); var styles = StyleSheet.create({ container: { flex: 1, backgroundColor:\'white\', }, welcome: { fontSize: 20, textAlign: \'center\', margin: 10, } }); module.exports = Mine;
运行效果:
以上是关于React Native使用AsyncStorage本地持久化的主要内容,如果未能解决你的问题,请参考以下文章
更新 react-native-maps 以使用 create-react-native-app
react-native字体react-native-vector-icons在ios下的使用
在另一个 React-Native 库中使用 React-Native 库
更新 react-native 后无法使用 react-native-debugger