Hướng dẫn dùng react-native-async-storage JavaScript - sử dụng JavaScript phản ứng gốc-async-storage

Question

Nội dung chính Show

getItem()
setItem()
setItem()
setItem()
setItem()
setItem()
setItem()
Key of the item to set.
setItem()
multiremove ()
multiremove ()

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:

Name	Type	Required	Description
key	string	Yes	Key of the item to fetch.
callback	`_storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } };` 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:

Name	Type	Required	Description
key	string	Yes	Key of the item to fetch.
callback	string	Yes	Key of the item to fetch.
callback	`_storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } };` 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:

Name	Type	Required	Description
key	string	Yes	Key of the item to fetch.
callback	`_storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } };` 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:

Name	Type	Required	Description
key	string	Yes	Key of the item to fetch.
callback	string	Yes	Key of the item to fetch.
callback	`_storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } };` 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   } };

0

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:

Name	Type	Required	Description
callback	`_storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } };` 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   } };

1

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:

Name	Type	Required	Description
callback	`_storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } };` 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   } };

2

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.

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

3

value

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

4

Value to set for the

_storeData = async () => {
  try {
    await AsyncStorage.setItem(
      '@MySuperStore:key',
      'I like to save it.'
    );
  } catch (error) {
    // Error saving data
  }
};

1.

Parameters:

Name	Type	Required	Description
key	string	Yes	Key of the item to fetch.
callback	`_storeData = async () => { try { await AsyncStorage.setItem( '@MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } };` 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   } };

5

setItem()

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

6

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.

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

7

Value to set for the

_storeData = async () => {
  try {
    await AsyncStorage.setItem(
      '@MySuperStore:key',
      'I like to save it.'
    );
  } catch (error) {
    // Error saving data
  }
};

1.

Parameters:

Name	Type	Required	Description
key	string	Yes	Key of the item to fetch.
gọi lại	`static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)` 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   } };

8

Gọ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:

Tên	Loại hình	Yêu cầu	Sự mô tả
chìa khóa	`static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)` 5	Đúng	Mảng khóa cho các mục để xóa.
gọi lại	`static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)` 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   } };

9

multiremove ()

import { AsyncStorage } from 'react-native';

0

Gọ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:

Tên	Loại hình	Yêu cầu	Sự mô tả
chìa khóa	`static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)` 5	Đúng	Mảng khóa cho các mục để xóa.
gọi lại	`static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)` 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 ()

programming javascript Async-storage react native @react-native-async-storage/async-storage npm Install async-storage react-native React-native-async-storage async-storage Yarn React-native storage

Hướng dẫn dùng react-native-async-storage JavaScript - sử dụng JavaScript phản ứng gốc-async-storage

Reference

Methods​

getItem()​

setItem()​

setItem()​

setItem()​

setItem()​

setItem()​

setItem()​

Key of the item to set.

setItem()​

multiremove ()

multiremove ()

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Methods

getItem()

setItem()

setItem()

setItem()

setItem()

setItem()

setItem()

setItem()