React Native开发经验集React Native开发React Native实践

reactnative 数据持久化AsyncStorage(二)

2018-08-17  本文已影响15人  DaZenD

数据持久化 - AsyncStorage

static object setItem(key, value,aCallBack)

    // 构造
    constructor(props) {
        super(props);
        this.doSomething=this.doSomething.bind(this);
    }

    doSomething(error){
        if(error!=null){   //如发生错误 处理
            console.log('error message:'+error.message);
            return;
        }
        // 执行保存成功的操作
        console.log("name保存成功!");
    }
    //下面4种写法, 推荐第三种和第四种
    componentWillMount() {
        //最简单的写法 , 无法检测保存何时结束,是否成功
        AsyncStorage.setItem('NO','01'); 
        console.log("NO保存成功");
      
        // 通过自带的回调方法,一旦发生出错就可以监控到
        AsyncStorage.setItem('name','张三',this.doSomething);


        //Promise操作 ES2015推荐的写法
        AsyncStorage.setItem('age',"18").then(
            ()=>{   //成功的操作
                console.log("age保存成功!");
            },
        );
        // 使用ES2017推荐的异步的写法
        this.saveSex();

    }
    // 箭头函数不需要在构造函数中bind(this)了
    saveSex = async ()=> {
        try {
           await AsyncStorage.setItem('sex','female');
            console.log("sex保存成功!");
        } catch(error) {
            console.error(error);
        }
    };

static object multiSet(aArray, aCallback)

    AsyncStorage.multiSet([['name','李四'],["sex","male"]])
            .then(
                ()=>{
                    console.log("name,sex保存成功");
                }
            ).catch((errors)=>{
                console.log('error,length:'+errors.length);
                if(errors.length>0){  //保存操作有异常
                    console.log(errors[0].message);
                    //...
                }else{
                    //异常不是数组,有可能是成功操作的处理函数抛出的异常
                    //...
                }
        });

static object getItem(aKey,aCallback)

注意: 自定义回调,第一个参数是error,跟promise反着(第一个参数为完成,第二个为失败)

componentWillMount() {

        //...

        //方式一 读取数据
        AsyncStorage.getItem("name", this.handleResult);

        //方式二
        AsyncStorage.getItem('sex')
            .then(  //使用Promise机制的方法
                (result)=> {   //使用Promise机制,如果操作成功不会有error参数
                    if (result == null) {
                        //没有指定的key
                        return;
                    }
                    console.log("sex:" + result);
                }
            ).catch((error)=> {  //读取操作失败
                console.log('error:' + error.message);
        });
    }
    
    handleResult(error, result) {
        if (error != null) {
            console.log('error message:' + error.message);
            return;
        }
        if (result == null) {
            //没有指定的key
            return;
        }
        console.log("name:" + result);

    }

static object getAllkeys([aCallback])
static object multiGet(aArrays,aCallBack)

//官方示例代码

AsyncStorage.getAllKeys((err, keys) => {
  AsyncStorage.multiGet(keys, (err, stores) => {
   stores.map((result, i, store) => {
     // get at each store's key/value so you can work with it
     let key = store[i][0];
     let value = store[i][1];
    });
  });
});

static removeItem(key, callback?)

static multiRemove(keys, callback?)

static clear(callback?)

json数据

key-value 形式存储的数据过于简单,类比sp/ud可知,不宜存储过大数据。但是也可以实现存储json数据。

注意:因为JSON是js自带的对象千万别化蛇添足把JSON添加到import组件中

json 》string

let studentData = require('json数据');    
let newJSONString=JSON.stringify(studentData);

string 》 json

let jsonObject=JSON.parse(newJSONString)

异常注意

JSONparse函数要求严格,不允许有尾逗号,如果有机会抛出异常

JSON.parse('{"name":"张三" ,}');

AsyncStorage封装

框架

其他相关资料

个人rn相关专题

上一篇下一篇

猜你喜欢

热点阅读