Fork me on GitHub

ReactNative之AsyncStorage本地存储

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

AsyncStorage原理和使用

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

数据持久化.jpg

json文件内容.jpg

存储

1
2
static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) 
//将key字段的值设置成value,并在完成后调用callback函数。如果有任何错误发生,则会传递一个Error对象作为第一个参数。返回一个Promise对象
  • 注意:AsyncStorage只能存储字符串,需要把对象转换为字符串才行
  • 具体使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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('存储完成')
}
})

读取

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

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
//读取
_readData(){
console.log('读取')
AsyncStorage.getItem('per', function (error, result) {
if (error) {
alert('读取失败')
}else {
console.log(result)
alert('读取完成')
}
})
}

删除

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

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

函数用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//删除
_deleteData(){
console.log('删除')

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

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

其他用法

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

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

static flushGetRequests()
//清除所有进行中的查询操作。
-------------本文结束感谢您的阅读-------------
欢迎您扫一扫下面的微信公众号,订阅我的博客!
TitanKing wechat
坚持原创技术分享,您的支持将鼓励我继续创作!
分享到:
0%