react native学习笔记16——存储篇(1)AsyncStorage

前端之家收集整理的这篇文章主要介绍了react native学习笔记16——存储篇(1)AsyncStorage前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_1@前言

React Native中常用的数据本地化存储的方法有如下几种:

  • AsyncStorage:以键值对的形式存储的轻量存储器,只能存储字符串数据。
  • sqlite:一种轻型的数据库,多用于移动端开发,原生应用开发中比较常见。
  • Realm:新兴的移动端数据存储方法,使用简单、跨平台、性能优越功能强大。

本文主要主要介绍第一种——AsyncStorage。

AsyncStorage介绍

AsyncStorage是react native提供的轻量存储器,类似Android中的SharePreference, iOS中的NSUserDefault,以键值对的形式存储将信息存储在本地,它是一个简单的、未加密的、异步的、持久化的Key-Value 存储系统,对于App来说是全局性的。官方建议使用时在AsyncStorage的基础上做一层抽象封装,而不是直接使用AsyncStorage。
AsyncStorage的JS代码是对原生实现的一个简易封装,提供一个更清晰的JS API、返回真正的错误对象,以及简单的单项对象操作函数。每个方法都会返回一个Promise对象。

下面是使用AsyncStorage存储数据、获取数据的简单示例。
存储数据:

try {
  await AsyncStorage.setItem('samplekey','lalala.');
} catch (error) {
  // Error saving data
}

获取数据:

try {
  const value = await AsyncStorage.getItem('samplekey');
  if (value !== null){
    // We have data!!
    console.log(value);
  }
} catch (error) {
  // Error retrieving data
}

常用的方法

  1. 获取键所对应的值:static getItem(key: string,callback:(error,result))
    根据键来获取值,获取的结果会放在回调函数中。

  2. 设置键-值对:static setItem(key: string,value: string,callback:(error))
    根据键来设置值。

  3. 移除键-值对:static removeItem(key: string,callback:(error))
    根据键来移除项。

  4. 合并键-值对:static mergeItem(key: string,callback:(error))
    合并现有值和输入值。

  5. 清除所有的数据:static clear(callback:(error))
    清除所有的内容

  6. 获取所有的键:static getAllKeys(callback:(error,keys))
    获取所有的键。

  7. 清除进行中的查询操作:static flushGetRequests()
    清除所有进行中的查询操作。

  8. 获取多个键对应的值:static multiGet(keys,callback:(errors,result))
    获取多项,其中 keys 是字符串数组,比如:['k1','k2']

  9. 设置多项键-值对:static multiSet(keyValuePairs,callback:(errors))
    设置多项,其中 keyValuePairs 是字符串的二维数组,比如:[['k1','val1'],['k2','val2']]

  10. 删除多项键-值对static multiRemove(keys,callback:(errors))
    删除多项,其中 keys 是字符串数组,比如:['k1','k2']

  11. 合并多项键-值对static multiMerge(keyValuePairs,callback:(errors))
    多个键值合并,其中 keyValuePairs 是字符串的二维数组,比如:[['k1','val2']]

使用实例

下面示例中主要通过 AsyncStorage.getItemAsyncStorage.setItemAsyncStorage.removeItem实现AsyncStorage的增删查,如果对同一个key用setItem设置不同的值,后一次设置的值会覆盖前一次的值,以此来实现对数据的修改更新。

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

const {width,height} = Dimensions.get('window');
var data = "";
const AsyncStorageKey = "ASE_";
export default class AsyncStorageExample extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data:""
        };
    }

    setData(text){
        AsyncStorage.setItem(AsyncStorageKey,text,()=>{
            this.setState({
                data:text,});
        });
    }

    delData(){
        AsyncStorage.getItem(AsyncStorageKey,(error,text)=>{
            if(text=== null ){
                alert(AsyncStorageKey +"没有对应的值");
            }else{
                //移除键-值对
                AsyncStorage.removeItem(AsyncStorageKey,()=>{
                    this.setState({
                        data:"",},()=>{
                        alert('删除成功');
                    });
                });
            }
        });
    }

    render() {
        return (
            <View style={styles.container}> <Button onPress={this.setData.bind(this,"我用 AsyncStorage存了一条信息")} style={styles.itemView} title="存储数据"> </Button> <Button onPress={this.delData.bind(this)} style={styles.itemView} title="删除数据" > </Button> <Text style={{paddingTop:40}}> AsyncStorage存储的值是: </Text> <Text> {this.state.data} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,backgroundColor: '#f2f2f2',paddingTop:20,itemView:{ backgroundColor:'grey',height:44,width:width,justifyContent:'center',marginTop:10,itemText:{ fontSize:15,color:'#ffffff',textAlign:'left',marginLeft:20,});
原文链接:https://www.f2er.com/react/302402.html

猜你在找的React相关文章