محبوبیت React Native به عنوان یک ابزار توسعه اپلیکیشن موبایل به دلیل توانایی آن در ایجاد اپلیکیشن های چند پلتفرمی با استفاده از اصول آشنای جاوا اسکریپت و React افزایش یافته است.

هنگام ساخت برنامه های تلفن همراه، یکی از نیازهای رایج، توانایی ذخیره داده ها به صورت محلی در دستگاه است. این زمانی است که حافظه محلی وارد عمل می شود. Async Storage که توسط React Native Expo ارائه شده است، یک راه حل ساده اما قدرتمند برای ذخیره داده ها به صورت محلی در برنامه های React Native Expo شما است.

در این آموزش، اصول ذخیره سازی محلی را مورد بحث قرار می دهیم، Async Storage را معرفی می کنیم و نحوه ادغام صحیح آن را در پروژه های React Native Expo نشان می دهیم.

فهرست مطالب

پیش نیازها

Local Storage چیست؟

Async Storage چیست؟

چگونه با Async Storage شروع کنیم

آشنایی با روش‌های ذخیره‌سازی همگام

استفاده پیشرفته و بهترین شیوه ها

نتیجه

پیش نیازها

آشنایی با React Native و JavaScript.

Node.js و npm (یا نخ) نصب شده است.

Local Storage چیست؟

فضای ذخیره‌سازی محلی یکی از اجزای ضروری توسعه اپلیکیشن موبایل است که به توسعه‌دهندگان اجازه می‌دهد داده‌ها را در دستگاه کاربر ذخیره کنند. برخلاف سایر گزینه‌های ذخیره‌سازی مانند پایگاه‌های داده، Local Storage از تکنیک ذخیره‌سازی جفت کلید-مقدار ساده استفاده می‌کند.

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

ذخیره سازی محلی برای افزایش سرعت برنامه ضروری است زیرا نیاز به بازیابی منظم داده ها از سرورهای دور را از بین می برد.

Async Storage چیست؟

Async Storage یک سیستم ذخیره سازی با ارزش کلیدی است که توسط React Native Expo ارائه شده است که به شما امکان می دهد فضای ذخیره سازی محلی را در برنامه های تلفن همراه مدیریت کنید. این یک سیستم ذخیره سازی کلید-مقدار ساده را فراهم می کند که توسعه دهندگان را قادر می سازد تا داده ها را به صورت ناهمزمان ذخیره و بازیابی کنند.

برخلاف روش‌های ذخیره‌سازی همزمان، Async Storage به شما امکان می‌دهد داده‌ها را بدون وقفه در رشته اصلی ذخیره و بازیابی کنید و در نتیجه تجربه کاربری یکپارچه‌تری را به همراه داشته باشید.

چگونه با Async Storage شروع کنیم

برای استفاده از Async Storage در پروژه React Native Expo، مطمئن شوید که Expo نصب شده است. اگر قبلاً یک پروژه React Native Expo راه‌اندازی نکرده‌اید، می‌توانید با نصب Expo CLI این کار را انجام دهید:

 $ npm install -g expo-cli

یک پروژه Expo جدید ایجاد کنید:

 $ expo init MyProject $ cd MyProject

برای گفت ن Async Storage به پروژه خود، دستور زیر را اجرا کنید:

 $ expo install @react-native-async-storage/async-storage

@react-native-async-storage/async-storage نسخه ای از AsyncStorage است که توسط جامعه نگهداری می شود. پس از نصب، می توانید فایلی را برای مدیریت متدهای AsyncStorage مانند setItem() , updateItem() , deleteItem() و موارد دیگر راه اندازی کنید. هر زمان که بخواهید با حافظه محلی تماس بگیرید، این فایل وارد می شود.

در این مثال، ما یک پوشه به نام utils در مسیر اصلی پروژه خود ایجاد می کنیم و سپس فایل AsyncStorage.js را برای مدیریت این روش ها ایجاد می کنیم:

در فایل AsyncStorage.js می توانید متدهای AsyncStorage را به این صورت تعریف کنید:

 // utils/AsyncStorage.js import AsyncStorage from '@react-native-async-storage/async-storage'; export const setItem = async (key, value) => { try { await AsyncStorage.setItem(key, JSON.stringify(value)); } catch (error) { console.error('Error setting item:', error); } }; export const getItem = async (key) => { try { const value = await AsyncStorage.getItem(key); return value != null ? JSON.parse(value) : null; } catch (error) { console.error('Error getting item:', error); return null; } }; export const removeItem = async (key) => { try { await AsyncStorage.removeItem(key); } catch (error) { console.error('Error removing item:', error); } }; export const mergeItem = async (key, value) => { try { await AsyncStorage.mergeItem(key, JSON.stringify(value)); } catch (error) { console.error('Error merging item:', error); } }; export const clear = async () => { try { await AsyncStorage.clear(); } catch (error) { console.error('Error clearing AsyncStorage:', error); } }; export const getAllKeys = async () => { try { return await AsyncStorage.getAllKeys(); } catch (error) { console.error('Error getting all keys:', error); return []; } }; export const getAllItems = async () => { try { const keys = await AsyncStorage.getAllKeys(); const items = await AsyncStorage.multiGet(keys); return items.reduce((accumulator, [key, value]) => { accumulator[key] = JSON.parse(value); return accumulator; }, {}); } catch (error) { console.error('Error getting all items:', error); return {}; } };

به جلو حرکت می کنیم، در بخش بعدی، معنی این توابع AsyncStorage را در فایل AsyncStorage.js توضیح خواهیم داد.

آشنایی با روش‌های ذخیره‌سازی همگام

با جدا کردن توابع AsyncStorage در فایل خود، می‌توانید به راحتی آن‌ها را در سراسر پروژه React Native Expo مدیریت کرده و مجدداً استفاده کنید. این رویکرد ماژولار نگهداری و خوانایی کد را بهبود می بخشد.

در قسمت قبل فایل AsyncStorage.js را ایجاد کردیم و چندین تابع اضافه کردیم.

در قسمت های بعدی در مورد این روش ها و نحوه استفاده موثر از آنها صحبت خواهیم کرد.

setItem()

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

 await AsyncStorage.setItem('username', 'freeCodeCamp');

getItem()

متد getItem() مقدار مربوط به یک کلید داده شده را از حافظه محلی برمی گرداند. یک پارامتر/کلید می فرستد، که شناسایی منحصر به فرد داده های درخواست شده است. و مقدار مربوط به کلید ارائه شده را برمی گرداند یا اگر مقداری برای کلید داده شده کشف نشد، null را برمی گرداند.

 const username = await AsyncStorage.getItem('username');

در این سناریو، مقدار username کلیدی از حافظه محلی واکشی می شود. این مقدار به‌دست‌آمده، freeCodeCamp ، سپس در نام کاربری متغیر قرار می‌گیرد و آن را برای استفاده بیشتر در برنامه در دسترس قرار می‌دهد.

removeItem()

این تابع شیء را با کلید ارائه شده از حافظه محلی حذف می کند. زمانی مفید است که می‌خواهید یک داده خاص را که دیگر مورد نیاز نیست حذف کنید.

 await AsyncStorage.removeItem('username');

در این مثال، شی با username کلیدی شناسایی می شود از حافظه محلی حذف می شود.

mergeItem()

متد mergeItem() مقدار یک کلید موجود را با مقدار ارائه شده به عنوان ورودی ترکیب می کند. اگر کلید وجود نداشته باشد، مانند setItem() کار می کند و یک جفت کلید-مقدار جدید ایجاد می کند.

 await AsyncStorage.mergeItem('user', JSON.stringify({ name: 'John' }));

clear()

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

 await AsyncStorage.clear();

getAllKeys()

تابع getAllKeys() تمام کلیدهای نگهداری شده در حافظه محلی را برمی گرداند. زمانی که نیاز دارید همه کلیدها را حلقه بزنید یا عملیات را بر اساس کلیدهای موجود در حافظه محلی انجام دهید، مفید است.

 const keys = await AsyncStorage.getAllKeys();

multiGet()

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

 const data = await AsyncStorage.multiGet(['username', 'email']);

در این مثال، مقادیر username و email کلیدها از حافظه محلی واکشی می شوند.

استفاده پیشرفته و بهترین شیوه ها

در حالی که AsyncStorage یک رابط ساده برای ذخیره سازی محلی ارائه می دهد، چندین بهترین روش وجود دارد که باید در نظر بگیرید:

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

Error Handling : برای رسیدگی به هر گونه خرابی که ممکن است در طول عملیات Async Storage رخ دهد، مدیریت دقیق خطا را اجرا کنید.

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

نتیجه

در پایان، استفاده از فضای ذخیره‌سازی محلی در پروژه‌های React Native Expo برای توسعه برنامه‌های کاربردی تلفن همراه قوی و پاسخگو ضروری است. Async Storage فرآیند ذخیره و بازیابی داده ها را در دستگاه ساده می کند، تجربه کاربری ثابتی را ارائه می دهد و عملکردهای آفلاین را فعال می کند.

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

به یاد داشته باشید، اگر سؤالی دارید یا فقط می خواهید سلام کنید، در X (تویتر) یا وب سایت من با من تماس بگیرید. :)

خبرکاو