ReactNative之AsyncStorage本地存储

ReactNative之本地存储

• 在RN开发中，持久化存储数据，可以使用AsyncStorage，对原生的API进行了一层封装
• AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的

AsyncStorage原理和使用

• AsyncStorage存储数据，在iOS中，底层会把数据保存到沙盒中的Documents中,并生成manifest.json文件。保存的数据都在manifest.json中。
• AsyncStorage删除数据，也仅仅是删除manifest.json文件中的数据，并不是删除manifest.json文件
• 唯有clear方法是将文件删除

数据持久化.jpg

json文件内容.jpg

一. 存储

static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) 
//将key字段的值设置成value，并在完成后调用callback函数。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象

• 注意：AsyncStorage只能存储字符串，需要把对象转换为字符串才行
• 具体使用

//key值
var key = 'per'
var person = {
    name:'jun',
    age:20
}

//json转成字符串
var jsonStr = JSON.stringify(person)

//存储
AsyncStorage.setItem('person', jsonStr, function (error) {
    if (error) {
        alert('存储失败')
    }else {
        alert('存储完成')
    }
})

二. 读取

static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void) 
//读取key字段并将结果作为第二个参数传递给callback。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。

使用方法

//读取
_readData(){
    console.log('读取')
    AsyncStorage.getItem('per', function (error, result) {
        if (error) {
            alert('读取失败')
        }else {
            console.log(result)
            alert('读取完成')
        }
    })
}

三. 删除

static removeItem(key: string, callback?: ?(error: ?Error) => void) 
//删除一个字段。返回一个Promise对象。

static clear(callback?: ?(error: ?Error) => void) 
//删除全部的AsyncStorage数据，即直接删除该缓存文件

函数用法

//删除
_deleteData(){
    console.log('删除')

    //删除一条数据
    AsyncStorage.removeItem('per', function (error) {
        if (error) {
            alert('删除失败')
        }else {
            alert('删除完成')
        }
    })

    //删除json文件
    AsyncStorage.clear(function (error) {
        if (error) {
            alert('文件删除失败')
        }else {
            alert('文件删除完成')
        }
    })
}

四. 其他用法

static mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void) 
//假设已有的值和新的值都是字符串化的JSON，则将两个值合并。返回一个Promise对象。还没有被所有原生实现都支持

static getAllKeys(callback?: ?(error: ?Error, keys: ?Array) => void) 
//获取所有本应用可以访问到的数据，不论来自什么库或调用者。返回一个Promise对象。

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