react-native之AsyncStorage

AsyncStorage是一个简单的,具有异步特性的储存API,它的储存方式为键值对的方式,且对整个App而言,是全局的。

AsyncStorage提供了较全的方法供我们使用,每个方法都有一个回调函数,而回调函数的第一个参数都是错误对象error,所有的方法执行之后都会返回一个Promise对象。

方法

static getItem(key: string,callback?: ?(error: ?Error,result: ?string) => void) 

读取key字段并将结果作为第二个参数传递给callback。如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。

static setItem(key: string,value: string,callback?: ?(error: ?Error) => void) 

将key字段的值设置成value,并在完成后调用callback函数。如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象。

static removeItem(key: string,callback?: ?(error: ?Error) => void) 

删除一个字段。返回一个Promise对象。

static mergeItem(key: string,callback?: ?(error: ?Error) => void) 

假设已有的值和新的值都是字符串化的JSON,则将两个值合并。返回一个Promise对象。还没有被所有原生实现都支持。

static clear(callback?: ?(error: ?Error) => void) 

删除全部的AsyncStorage数据,不论来自什么库或调用者。通常不应该调用这个函数——使用removeItem或者multiRemove来清除你自己的key。返回一个Promise对象。

static getAllKeys(callback?: ?(error: ?Error,keys: ?Array<string>) => void) 

获取所有本应用可以访问到的数据,不论来自什么库或调用者。返回一个Promise对象。

static flushGetRequests() 

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

static multiGet(keys: Array<string>,callback?: ?(errors: ?Array<Error>,result: ?Array<Array<string>>) => void) 

获取keys所包含的所有字段的值,调用callback回调函数时返回一个key-value数组形式的数组。返回一个Promise对象。

multiGet(['k1','k2'],cb) -> cb([['k1','val1'],['k2','val2']])

static multiSet(keyvaluePairs: Array<Array<string>>,callback?: ?(errors: ?Array<Error>) => void) 

multiSet和multiMerge都接受一个与multiGet输出值一致的key-value数组的数组。返回一个Promise对象。

multiSet([['k1','val2']],cb);

static multiRemove(keys: Array<string>,callback?: ?(errors: ?Array<Error>) => void) 

删除所有键在keys数组中的数据。返回一个Promise对象。

static multiMerge(keyvaluePairs: Array<Array<string>>,callback?: ?(errors: ?Array<Error>) => void) 

将多个输入的值和已有的值合并,要求都是字符串化的JSON。返回一个Promise对象。

还没有被所有原生实现都支持

小例子:

import React from 'react';
import {View,StyleSheet,Text,AsyncStorage} from 'react-native';

export default class Root extends React.Component{
	constructor(props){
		super(props);
		this.set = this.set.bind(this);
		this.get = this.get.bind(this);
		this.clear = this.clear.bind(this);
	}
	//渲染
	render(){

		return (
			<View style = {style.container}>
				<Text onPress = {this.set}>储存数据</Text>
				<Text style = {{marginTop: 10}} onPress = {this.get}>
					获取数据
				</Text>
				<Text style = {{marginTop: 10}} onPress = {this.clear}>
					清除数据
				</Text>
			</View>
		);
	}
	set(){
		AsyncStorage.setItem('name','gefufeng',(error) => {
			if (error) {
				alert("储存失败");
			}else{
				alert("储存成功");
			}
		});
	}
	get(){
		AsyncStorage.getItem('name',(error,result) => {
			if (error) {
				alert("获取失败");
			}else{
				alert("数据为:" + result);
			}
		});
	}
	clear(){
		AsyncStorage.removeItem('name',(error) => {
			if (!error) {
				alert("清除成功");
			}
		});
	}
}
const style = StyleSheet.create({
	container : {
		flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor : "#F5FCFF"
	}

});

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...