当前位置: article > 正文

React Native - 持久化存储（AsyncStorage）的使用详解（值得学习的网站）

作者：笔触狂放9 | 2024-08-06 17:25:46

踩

asyncstorage

原文链接：http://www.hangge.com/blog/cache/detail_1567.html

一，基本概念

1，AsyncStorage介绍

AsyncStorage 是一个简单的、异步的、持久化的 Key-Value 存储系统，它对于 App 来说是全局性的。它用来代替 LocalStorage。
由于它的操作是全局的，官方建议我们最好针对 AsyncStorage 进行一下抽象的封装再使用，而且不是直接拿 AsyncStorage 进行使用。
AsyncStorage 存储的位置根据系统的不同而有所差异。iOS 中的存储类似于 NSUserDefault，通过 plist 文件存放在设备中。Android 中会存储在 RocksDB 或者 SQLite 中，取决于你使用哪个。

2，相关方法

（1）根据键来获取值，获取的结果会放在回调函数中。

1	`static` `getItem(key: string, callback:(error, result))`

（2）根据键来设置值。

1	`static` `setItem(key: string, value: string, callback:(error))`

（3）根据键来移除项。

1	`static` `removeItem(key: string, callback:(error))`

（4）合并现有值和输入值。

1	`static` `mergeItem(key: string, value: string, callback:(error))`

（5）清除所有的项目

1	`static` `clear(callback:(error))`

（6）获取所有的键

1	`static` `getAllKeys(callback:(error, keys))`

（7）清除所有进行中的查询操作。

1	`static` `flushGetRequests()`

（8）获取多项，其中 keys 是字符串数组，比如：['k1', 'k2']

1	`static` `multiGet(keys, callback:(errors, result))`

（9）设置多项，其中 keyValuePairs 是字符串的二维数组，比如：[['k1', 'val1'], ['k2', 'val2']]

1	`static` `multiSet(keyValuePairs, callback:(errors))`

（10）删除多项，其中 keys 是字符串数组，比如：['k1', 'k2']

1	`static` `multiRemove(keys, callback:(errors))`

（11）多个键值合并，其中 keyValuePairs 是字符串的二维数组，比如：[['k1', 'val1'], ['k2', 'val2']]

1	`static` `multiMerge(keyValuePairs, callback:(errors))`

二、使用样例

1，效果图

（1）在文本输入框中输入姓名、电话后，点击“保存”按钮即可通过 AsyncStorage 存储起来。

（2）退出程序后再次打开，程序又会自动加载之前保存的信息。

（3）点击“清除”按钮则将本地保存的数据全部清除。

2，样例代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TextInput,

AsyncStorage

} from 'react-native';

//用户信息填写组件

class UserInfo extends Component {

//构造函数

constructor(props) {

super(props);

this.state = {name: '', phone: ''};

}

//页面的组件渲染完毕（render）之后执行

componentDidMount(){

var _that = this;

//需要查询的键值

var keys = ["name","phone"];

//根据键数组查询保存的键值对

AsyncStorage.multiGet(keys, function(errs, result){

//如果发生错误，这里直接返回（return）防止进入下面的逻辑

if(errs){

return;

}

//得到的结果是二维数组（result[i][0]表示我们存储的键，result[i][1]表示我们存储的值）

_that.setState({

name: (result[0][1]!=null)?result[0][1]:'',

phone: (result[1][1]!=null)?result[1][1]:''

});

}

//组件渲染

render() {

return (

<View style={styles.flex}>

<View style={styles.row}>

<View style={styles.head}>

<Text style={styles.label}>姓名</Text>

</View>

<View style={styles.flex}>

<TextInput style={styles.input}

value={this.state.name}

onChangeText={(name) => this.setState({name})}/>

</View>

<View style={styles.row}>

<View style={styles.head}>

<Text style={styles.label}>电话</Text>

</View>

<View style={styles.flex}>

<TextInput style={styles.input}

value={this.state.phone}

onChangeText={(phone) => this.setState({phone})}/>

</View>

<View style={styles.row}>

<Text style={styles.btn} onPress={this.save.bind(this)}>保存</Text>

<Text style={styles.btn} onPress={this.clear.bind(this)}>清除</Text>

</View>

);

}

//保存数据

save() {

//设置多项

var keyValuePairs = [['name', this.state.name], ['phone', this.state.phone]]

AsyncStorage.multiSet(keyValuePairs, function(errs){

if(errs){

//TODO：存储出错

return;

}

alert('数据保存成功!');

});

}

//清除数据

clear() {

var _that = this;

AsyncStorage.clear(function(err){

if(!err){

_that.setState({

name: "",

phone: ""

});

alert('存储的数据已清除完毕!');

}

});

}

//默认应用的容器组件

class App extends Component {

render() {

return (

<View style={[styles.flex, styles.topStatus]}>

<UserInfo></UserInfo>

</View>

);

}

//样式定义

const styles = StyleSheet.create({

flex:{

flex: 1,

},

topStatus:{

marginTop:25,

},

row:{

flexDirection:'row',

height:45,

marginBottom:10

},

head:{

width:70,

marginLeft:5,

backgroundColor:'#23BEFF',

height:45,

justifyContent:'center',

alignItems: 'center'

},

label:{

color:'#fff',

fontSize:15,

fontWeight:'bold'

},

input:{

height:45,

borderWidth:1,

marginRight: 5,

paddingLeft: 10,

borderColor: '#ccc'

},

btn:{

flex:1,

backgroundColor:'#FF7200',

height:45,

textAlign:'center',

color:'#fff',

marginLeft:5,

marginRight:5,

lineHeight:45,

fontSize:15,

},

});

AppRegistry.registerComponent('HelloWorld', () => App);

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1567.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/938463

React Native - 持久化存储（AsyncStorage）的使用详解 （值得学习的网站）

一，基本概念

1，AsyncStorage介绍

2，相关方法

二、使用样例

1，效果图

2，样例代码

React Native - 持久化存储（AsyncStorage）的使用详解（值得学习的网站）