AsyncStorage در React Native چیست و چگونه از آن استفاده کنیم؟

نحوه پیاده سازی این سیستم ذخیره سازی کلید-مقدار ناهمزمان و جهانی را برای برنامه React Native خود بیاموزید.

AsyncStorage React Native ذخیره و ماندگاری داده ها را در یک برنامه React Native ساده می کند. با AsyncStorage API، می توانید موارد ساده ای از داده های کوچک را در برنامه خود بدون نیاز به ذخیره سازی محلی دستگاه یا سیستم های ذخیره سازی پیچیده مدیریت کنید.

AsyncStorage React Native چیست؟

AsyncStorage API یک سیستم ذخیره‌سازی کلید-مقدار پایدار است. API از طیف وسیعی از انواع داده جاوا اسکریپت از جمله اشیاء رشته ای، بولی، عددی و JSON پشتیبانی می کند.

داده‌های ذخیره‌شده با استفاده از AsyncStorage باقی می‌مانند و حتی در صورت بسته شدن برنامه یا راه‌اندازی مجدد دستگاه در دسترس باقی می‌مانند. این امر AsyncStorage را به یک راه حل ایده آل برای ذخیره سازی داده ها و ذخیره مقادیر کمی از وضعیت برنامه تبدیل می کند.

AsyncStorage چه مشکلی را حل می کند؟

قبل از ظهور AsyncStorage، ذخیره سازی مناسب داده ها تلاشی غیرقابل اعتماد بود. می‌توانید داده‌ها را در فضای ذخیره‌سازی محلی ذخیره کنید، که وقتی برنامه شما بسته می‌شود نمی‌تواند داده‌ها را حفظ کند، یا می‌توانید داده‌ها را در یک سیستم مدیریت پایگاه داده رابطه‌ای (RDBMS) ذخیره کنید. اما آنها برای این مورد استفاده بسیار پیچیده هستند.

AsyncStorage این مشکلات را با ارائه یک روش ساده و قابل اعتماد برای ذخیره داده های کوچک و موقت در برنامه های React Native حل می کند.

برای ذخیره داده ها با AsyncStorage، ابتدا داده ها در یک رشته JSON سریال می شوند. سپس رشته JSON در یک سیستم کلید-مقدار ذخیره می شود. هنگامی که می‌خواهید داده‌ها را از AsyncStorage بازیابی کنید، داده‌ها از JSON جدا می‌شوند و سپس در قالب اصلی به شما بازگردانده می‌شوند.

اینها برنامه های ناهمزمانی هستند که بدون مسدود کردن رشته اصلی جاوا اسکریپت اجرا می شوند. ایده آل کردن آن برای ذخیره داده هایی که نیاز به دسترسی مکرر دارند، مانند تنظیمات کاربر و وضعیت برنامه.

روش‌های AsyncStorage

برای نصب بسته react-native-async-storage، دستور زیر را در ترمینال پروژه خود اجرا کنید:

npm install @react-native-async-storage/async-storage

از آنجایی که AsyncStorage ماهیت ناهمزمان دارد، روش‌های آن فوراً نتایج را بر نمی‌گردانند. در عوض، آنها قولی را پس می‌دهند که پس از اتمام عملیات برطرف می‌شود.

هنگام فراخوانی متدهای AsyncStorage باید از syntax async/wait یا تکنیکی مشابه استفاده کنید.

با استفاده از متدهای setItem() و multiSet() داده بنویسید

متدهای setItem() و multiSet() برای تنظیم مقادیر کلید داده شده استفاده می شوند. این روش ها کلید و مقادیر را به عنوان پارامتر می پذیرند.

این روش یک وعده را برمی‌گرداند که با یک مقدار بولی حل می‌شود که نشان می‌دهد آیا عملیات موفقیت‌آمیز بوده است یا در صورت شکست عملیات با یک خطا رد می‌شود:

// Save a value for the key "user"
await AsyncStorage.setItem('user', 'john');

// Save multiple values for the key "user"
await AsyncStorage.multiSet(['user', 'john', 'doe']);

خواندن داده ها با استفاده از متدهای getItem() و multiGet().

با متد getItem() می‌توانید داده‌های ذخیره‌شده را با استفاده از کلید مقداری که می‌خواهید دریافت کنید، از حافظه خارج کنید. اگر کلید ارسال شده وجود نداشته باشد، وعده با یک خطا رد می شود:

const name = await AsyncStorage.getItem('user');

مقدار بازگشتی توسط getItem() یک رشته است. اگر می‌خواهید داده‌ها را در قالب دیگری ذخیره کنید، می‌توانید از JSON.stringify() برای تبدیل داده‌ها به رشته قبل از ذخیره آن استفاده کنید. سپس از JSON.parse() برای تبدیل رشته به نوع داده اصلی هنگام بازیابی استفاده کنید.

مثلا:

// Save the object {name: "John Doe", age: 30} for the key "user"
await AsyncStorage.setItem('user', JSON.stringify({name: "John Doe", age: 30}));

// Get the object for the key "user"
const user = JSON.parse(await AsyncStorage.getItem('user'));

همچنین می توانید از متد ()multiGet برای کشیدن چندین جفت کلید-مقدار استفاده کنید. این روش آرایه ای از کلیدها را می گیرد که باید رشته ای باشند.

ادغام داده ها با استفاده از متدهای mergeItem() و multiMerge().

متدهای mergeItem() و multiMerge() مقدار داده شده را با مقدار موجود برای کلید داده شده ادغام می کنند. مقدار ارسال شده به mergeItem() می تواند هر نوع داده ای باشد. با این حال، مهم است که توجه داشته باشید که AsyncStorage داده ها را رمزگذاری نمی کند، بنابراین هر کسی که به دستگاه دسترسی دارد می تواند داده ها را بخواند:

await AsyncStorage.mergeItem('name', 'Jane Doe');

mergeItem() کلید مقداری را که می خواهید ادغام کنید و مقدار جدیدی را که می خواهید با مقدار موجود کلید ادغام کنید، می گیرد. از multiMerge() برای ادغام بیش از یک آیتم در یک مقدار کلیدی استفاده کنید.

Clear Storage با استفاده از متد clear().

متد clear() به شما امکان می دهد تمام موارد ذخیره شده در AsyncStorage را حذف کنید. این می تواند در سناریوهای مختلف مفید باشد، مانند زمانی که نیاز به تنظیم مجدد وضعیت برنامه در هنگام خروج کاربر یا پاک کردن داده های حافظه پنهان روی تلفن همراه خود دارید.

مثلا:

const clearData = async () => {
  try {
    await AsyncStorage.clear();
 
  } catch (e) {
    console.error(e);
  }
};

کد بالا تمام جفت های کلید-مقدار ذخیره شده در AsyncStorage را حذف می کند.

علاوه بر این، می توانید یک تابع callback برای clear() ارائه دهید که پس از تکمیل عملیات فراخوانی می شود:

AsyncStorage.clear()
  .then(() => {
    // Clear operation completed
   
  })
  .catch((error) => {
    console.error(error);
  });

توجه داشته باشید که متد clear() برای همیشه تمام داده های ذخیره شده در AsyncStorage را حذف می کند.

ذخیره داده ها با AsyncStorage

کش کردن داده ها یک روش معمول در توسعه برنامه های تلفن همراه برای بهبود عملکرد و کاهش درخواست های شبکه است. با AsyncStorage، به راحتی می توانید داده ها را در برنامه های React Native ذخیره کنید.

وقتی به یک داده دسترسی پیدا می‌کنید، ابتدا داده‌ها بررسی می‌شوند تا ببینند آیا قبلاً در حافظه پنهان هستند یا خیر. اگر اینطور باشد، داده ها از حافظه پنهان بازگردانده می شوند. اگر اینطور نیست، برنامه داده ها را از محل ذخیره سازی دائمی تر بازیابی کرده و در حافظه پنهان ذخیره می کند. دفعه بعد که به داده ها دسترسی پیدا کردید، به جای آن از حافظه پنهان بازگردانده می شود.

فرض کنید برنامه‌ای دارید که فهرستی از کتاب‌های واکشی شده از یک API را نمایش می‌دهد. برای افزایش عملکرد، می‌توانید داده‌های کتاب واکشی شده را با استفاده از AsyncStorage ذخیره کنید.

در اینجا یک نمونه از پیاده سازی این است:

const [books, setBooks] = useState([]);

useEffect(() => {
    const fetchBooks = async () => {
      try {
        // Check if the cached data exists
        const cachedData = await AsyncStorage.getItem('cachedBooks');

        if (cachedData !== null) {
          // If the cached data exists, parse and set it as the initial state
          setBooks(JSON.parse(cachedData));
        } else {
          // If the cached data doesn't exist, fetch data from the API
          const response = await fetch('https://api.example.com/books');
          const data = await response.json();

          // Cache the fetched data
          await AsyncStorage.setItem('cachedBooks', JSON.stringify(data));

          // Set the fetched data as the initial state
          setBooks(data);
        }
      } catch (error) {
        console.error(error);
      }
    };

    fetchBooks();
  }, []);

در این مثال، شما از قلاب useEffect برای واکشی داده های کتاب استفاده می کنید. در تابع fetchBooks، با فراخوانی AsyncStorage.getItem (‘cachedBooks’) بررسی کنید که آیا داده های کش وجود دارد یا خیر. اگر داده‌های کش وجود دارد، آن را با استفاده از JSON.parse تجزیه کنید و با استفاده از setBooks آن را به عنوان حالت اولیه تنظیم کنید. این به شما امکان می دهد تا داده های کش شده را بلافاصله نمایش دهید.

اگر داده های کش وجود ندارد، داده ها را با استفاده از متد fetch() از API واکشی کنید. پس از بازگرداندن داده ها، با فراخوانی AsyncStorage.setItem() آن را در حافظه پنهان ذخیره کنید. سپس داده های واکشی شده را به عنوان حالت اولیه تنظیم کنید، مطمئن شوید که رندرهای بعدی داده های واکشی شده را نمایش می دهند.

اکنون می توانید کتاب های کش شده را به این صورت نمایش دهید:

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  return (
    <View>
      <Text>Book List</Text>
      <FlatList
        data={books}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
            <Text>{item.author}</Text>
          </View>
        )}
      />
    </View>
  );
};

export default App;

راه اندازی بیشتر برنامه یا بارگیری مجدد صفحه، داده های کش شده را بدون درخواست غیر ضروری API نمایش می دهد.

استفاده از AsyncStorage برای بارگذاری دینامیک داده

React Native AsyncStorage یک راه حل قدرتمند برای ذخیره و بازیابی داده ها ارائه می دهد. با استفاده از قابلیت‌های کش، عملکرد را افزایش می‌دهد و دسترسی سریع‌تری به داده‌های ذخیره‌شده فراهم می‌کند.

وقتی دانش AsyncStorage را با تکنیک هایی مانند صفحه بندی سفارشی ترکیب می کنید، می توانید داده ها را به صورت پویا در برنامه React Native خود بارگیری و نمایش دهید. این امکان مدیریت کارآمد مجموعه داده های بزرگ را فراهم می کند.

منبع مقاله