当前位置: 代码迷 >> 综合 >> React-Native笔记--数据保存
  详细解决方案

React-Native笔记--数据保存

热度:33   发布时间:2024-01-24 07:08:52.0

       数据保存就是指应用程序将某些数据存储在手机存储空间中,AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。每一个AsyncStorage API都会返回一个JavaScript的Promise对象。

1 写入数据:

1.1、方法:static object setItem(key,value);
1.2、调用该方法可存入数据。
1.3、可以通过AsyncStorage提供的multiSet来一次存储多组数据。 static object multiSet(aArray)方法。

2 读取数据

2.1、调用getItem方法:static object getItem(aKey)
2.2、通过调用getAllKeys获取当前存储的所有键,static object getAllKeys([aCallback])
2.3、通过multiGet得到多个键对应的多个值。
2.4、AsyncStorage存储数据是无序的。

3 删除数据
3.1、函数:static object removeItem(aKey)
3.2、通过调用clear()函数删除所有的数据。
3.3、通过调用multiRemove删除多个对应的键和值:static object multiRemove(aArray)

4 修改数据

4.1、提供了两个方法进行该项操作:mergeItem(aKey,aValue)以及multiMerge(aArray)。

小栗子:

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;}console.log(' result= '  + result+" :::"+result[0][1]);//得到的结果是二维数组(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}><TextInputstyle={styles.input}value={this.state.name}onChangeText={name => this.setState({name})}/></View></View><View style={styles.row}><View style={styles.head}><Text style={styles.label}>电话</Text></View><View style={styles.flex}><TextInputstyle={styles.input}value={this.state.phone}onChangeText={phone => this.setState({phone})}/></View></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></View>);}//保存数据save() {//设置多项var keyValuePairs = [['name', this.state.name],['phone', this.state.phone],];AsyncStorage.multiSet(keyValuePairs, function(errs) {if (errs) {//TODO:存储出错return;}alert('数据保存成功!');console.log(' name=' + this.props.name + ' phone= ' + this.props.phone);});}//清除数据clear() {var _that = this;AsyncStorage.clear(function(err) {if (!err) {_that.setState({name: '',phone: '',});alert('存储的数据已清除完毕!');}});}
}//默认应用的容器组件
export default class MyStorage extends Component {render() {return (<View style={[styles.flex, styles.topStatus]}><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,},
});

 

  相关解决方案