react-native数据缓存AsyncStorage

前端之家收集整理的这篇文章主要介绍了react-native数据缓存AsyncStorage前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习交流:https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群:806870562


react-native中主要使用AsyncStorage进行数据缓存操作,其实现原理是key-value的形式。

主要功能有:保存(修改)、删除删除指定值,删除所有值)、读取。

效果


代码示例

  1. import React from 'react';
  2. import {View,Text,TouchableOpacity,Alert,AsyncStorage,StyleSheet} from 'react-native';
  3.  
  4. let message1 = "devZhang is an iOS developer.";
  5. let message2 = "devZhang comes from GuangDong.";
  6.  
  7. export default class DataStoragePage extends React.Component {
  8. render() {
  9. return(
  10. <View style={styles.container}>
  11. <Text style={styles.text}>数据缓存功能</Text>
  12. <TouchableOpacity style={styles.text} onPress={saveData}>
  13. <Text>保存数据</Text>
  14. </TouchableOpacity>
  15. <TouchableOpacity style={styles.text} onPress={readData}>
  16. <Text>读取数据</Text>
  17. </TouchableOpacity>
  18. <TouchableOpacity style={styles.text} onPress={deleteData}>
  19. <Text>删除数据</Text>
  20. </TouchableOpacity>
  21. <TouchableOpacity style={styles.text} onPress={modifyData}>
  22. <Text>修改数据</Text>
  23. </TouchableOpacity>
  24. <TouchableOpacity style={styles.text} onPress={deleteAllData}>
  25. <Text>删除所有数据</Text>
  26. </TouchableOpacity>
  27. </View>
  28. )
  29. }
  30. }
  31.  
  32. const saveData = () => {
  33. AsyncStorage.setItem('keyMessage',JSON.stringify(message1),(error) => {
  34. let value = "保存数据成功:"
  35. if (error) {
  36. value = "保存数据失败:"
  37. }
  38. Alert.alert(value + message1)
  39. });
  40. };
  41.  
  42. const readData = async () => {
  43. // 方法1
  44. // try {
  45. // let result = await AsyncStorage.getItem("keyMessage")
  46. // Alert.alert("读取成功:" + result)
  47. // } catch(error) {
  48. // Alert.alert("读取失败:" + error)
  49. // }
  50.  
  51. // 方法2
  52. AsyncStorage.getItem('keyMessage').then(result => {
  53. Alert.alert("读取成功:" + result)
  54. }).catch(error => {
  55. Alert.alert("读取失败:" + error)
  56. })
  57.  
  58. // 方法3
  59. // AsyncStorage.getItem('keyMessage',(error,result) => {
  60. // let value = "读取数据成功:"
  61. // let obj = JSON.parse(result);
  62. // if (error) {
  63. // value = "读取数据失败:"
  64. // }
  65. // Alert.alert(value + obj)
  66. // });
  67. };
  68.  
  69. const deleteData = () => {
  70. AsyncStorage.removeItem('keyMessage',(error) => {
  71. let value = "删除数据成功:"
  72. if (error) {
  73. value = "删除数据失败:"
  74. }
  75. Alert.alert(value + error)
  76. });
  77. };
  78.  
  79. const modifyData = () => {
  80. AsyncStorage.setItem('keyMessage',JSON.stringify(message2),(error) => {
  81. let value = "修改数据成功:"
  82. if (error) {
  83. value = "修改数据失败:"
  84. }
  85. Alert.alert(value + message2)
  86. });
  87. };
  88.  
  89. const deleteAllData = () => {
  90. AsyncStorage.clear((error) => {
  91. let value = "删除所有数据成功:"
  92. if (error) {
  93. value = "删除所有数据失败:"
  94. }
  95. Alert.alert(value + error)
  96. });
  97. };
  98.  
  99. const styles = StyleSheet.create({
  100. container: {
  101. display:"flex",flexDirection:"column",backgroundColor: 'white',alignItems: 'center',},text: {
  102. marginTop:10,justifyContent:"center",alignItems:'center',backgroundColor:'red',fontSize:20,color:"black",height:40,});

猜你在找的React相关文章