AsyncStorage là thành phần đơn giản dùng để lưu trữ dữ liệu offline. Nó hỗ trợ lưu trữ dữ liệu không mã hóa theo dạng cặp key-value và hỗ trợ bất đồng bộ
Chúng ta có thể lưu dữ liệu độ lớn tùy thuộc vào bộ nhớ của máy do AsyncStorage sẽ tự động sử dụng “Dictionary” hoặc File để lưu giá trị [iOS] hoặc sử dụng RocksDB, Sqlite [Android]
Để sử dụng AsyncStorage chúng ta chỉ cần 2 hàm đơn giản sau :
_storeData = async [] => {
try {
await AsyncStorage.setItem['TASKS', 'I like to save it.'];
} catch [error] {
// Error saving data
}
};
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
Từ ví dụ trên chúng ta giải thích các câu lệnh như sau :
Cách lưu dữ liệu : AsyncStorage.setItem[‘TASKS’, ‘I like to save it.’]TASKS là tên key . ‘I like to save it.’ là value – giá trị muốn lưu
TASKS là tên key .
‘I like to save it.’ là value – giá trị muốn lưu
Cách lấy dữ liệu : AsyncStorage.getItem[‘TASKS’] .TASKS là tên key muốn lấy giá trị, nếu không có hàm getItem sẽ trả về null
TASKS là tên key muốn lấy giá trị, nếu không có hàm getItem sẽ trả về null
Bài tập : Sinh viên tạo 1 màn hình Login với 2 TextInput nhập Username và Password. 1 Button Login và 1 checkbox “Nhớ mật khẩu” sử dụng AsyncStorage để lưu tài khoản đã đăng nhập
Deprecated. Use one of the community packages instead. Use one of the community packages instead.
import { AsyncStorage } from 'react-native';
2 is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.It is recommended that you use an abstraction on top of
import { AsyncStorage } from 'react-native';
2 instead of import { AsyncStorage } from 'react-native';
2 directly for anything more than light usage since it operates globally.On iOS,
import { AsyncStorage } from 'react-native';
2 is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, import { AsyncStorage } from 'react-native';
2 will use either RocksDB or SQLite based on what is available.The
import { AsyncStorage } from 'react-native';
2 JavaScript code is a facade that provides a clear JavaScript API, real import { AsyncStorage } from 'react-native';
8 objects, and non-multi functions. Each method in the API returns a import { AsyncStorage } from 'react-native';
9 object.Importing the
import { AsyncStorage } from 'react-native';
2 library:import { AsyncStorage } from 'react-native';
Persisting data:
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
Fetching data:
_retrieveData = async [] => {
try {
const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!!
console.log[value];
}
} catch [error] {
// Error retrieving data
}
};
Reference
Methods
getItem[]
static getItem[key: string, [callback]: ?[error: ?Error, result: ?string] => void]
Fetches an item for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object.Parameters:
key | string | Yes | Key of the item to fetch. |
callback | 3 | No | Function that will be called with a result if found or any error. |
setItem[]
static setItem[key: string, value: string, [callback]: ?[error: ?Error] => void]
Sets the value for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object.Parameters:
key | string | Yes | Key of the item to fetch. |
callback | string | Yes | Key of the item to fetch. |
callback | 3 | No | Function that will be called with a result if found or any error. |
setItem[]
static removeItem[key: string, [callback]: ?[error: ?Error] => void]
Sets the value for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object.Parameters:
key | string | Yes | Key of the item to fetch. |
callback | 3 | No | Function that will be called with a result if found or any error. |
setItem[]
static mergeItem[key: string, value: string, [callback]: ?[error: ?Error] => void]
Sets the value for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object.Key of the item to set. This is not supported by all native implementations.
Parameters:
key | string | Yes | Key of the item to fetch. |
callback | string | Yes | Key of the item to fetch. |
callback | 3 | No | Function that will be called with a result if found or any error. |
Example:
let UID123_object = {
name: 'Chris',
age: 30,
traits: { hair: 'brown', eyes: 'brown' }
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
traits: { eyes: 'blue', shoe_size: 10 }
};
AsyncStorage.setItem[
'UID123',
JSON.stringify[UID123_object],
[] => {
AsyncStorage.mergeItem[
'UID123',
JSON.stringify[UID123_delta],
[] => {
AsyncStorage.getItem['UID123', [err, result] => {
console.log[result];
}];
}
];
}
];
// Console log result:
// => {'name':'Chris','age':31,'traits':
// {'shoe_size':10,'hair':'brown','eyes':'blue'}}
setItem[]
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
0Sets the value for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object.Parameters:
callback | 3 | No | Function that will be called with a result if found or any error. |
setItem[]
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
1Sets the value for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object.Parameters:
callback | 3 | No | Function that will be called with a result if found or any error. |
setItem[]
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
2Sets the value for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object.Key of the item to set.
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
3value
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
4Value to set for the
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1. Parameters:
key | string | Yes | Key of the item to fetch. |
callback | 3 | No | Function that will be called with a result if found or any error. |
Example:
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
5setItem[]
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
6Sets the value for a
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1 and invokes a callback upon completion. Returns a import { AsyncStorage } from 'react-native';
9 object._retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
7Value to set for the
_storeData = async [] => {
try {
await AsyncStorage.setItem[
'@MySuperStore:key',
'I like to save it.'
];
} catch [error] {
// Error saving data
}
};
1. Parameters:
key | string | Yes | Key of the item to fetch. |
gọi lại | 9 | Không | Chức năng sẽ được gọi với một mảng của bất kỳ lỗi cụ thể khóa nào được tìm thấy. |
multiremove []
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
8Gọi cái này để lô xóa tất cả các khóa trong mảng
static setItem[key: string, value: string, [callback]: ?[error: ?Error] => void]
0.Trả về một đối tượng import { AsyncStorage } from 'react-native';
9.Parameters:
chìa khóa | 5 | Đúng | Mảng khóa cho các mục để xóa. |
gọi lại | 9 | Không | Chức năng sẽ được gọi với một mảng của bất kỳ lỗi cụ thể khóa nào được tìm thấy. |
Example:
_retrieveData = async [] => {
try { const value = await AsyncStorage.getItem['TASKS'];
if [value !== null] {
// We have data!! console.log[value];
} }
catch [error] {
// Error retrieving data } };
9multiremove []
import { AsyncStorage } from 'react-native';
0Gọi cái này để lô xóa tất cả các khóa trong mảng
static setItem[key: string, value: string, [callback]: ?[error: ?Error] => void]
0.Trả về một đối tượng import { AsyncStorage } from 'react-native';
9.Tên: This is not supported by all native implementations.
Parameters:
chìa khóa | 5 | Đúng | Mảng khóa cho các mục để xóa. |
gọi lại | 9 | Không | Chức năng sẽ được gọi với một mảng của bất kỳ lỗi cụ thể khóa nào được tìm thấy. |
Example:
multiremove []