از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ذخیره سازی در localStorage در React هنگام توسعه برنامه های کاربردی سبک – ممکن است بخواهیم برخی از داده ها را ذخیره کنیم. اگر پایگاه داده بیش از حد است – یک جایگزین عالی وجود دارد: localStorage! در حالی که این یک پایگاه داده را برای اهداف پایگاه داده جایگزین نمی کند ، اما به عنوان یک سیستم ذخیره سازی ساده مبتنی بر پرونده عمل می کند که می توانید برای ذخیره داده های قابل دسترسی به راحتی از آن استفاده کنید …
سرفصلهای مطلب
معرفی
هنگام توسعه برنامه های کاربردی سبک – ممکن است بخواهیم برخی از داده ها را ذخیره کنیم. اگر پایگاه داده بیش از حد است – یک جایگزین عالی وجود دارد: localStorage!
در حالی که این یک پایگاه داده را جایگزین نمی کند ، خوب ، اهداف پایگاه داده ، به عنوان یک سیستم ذخیره سازی ساده مبتنی بر پرونده است که می توانید برای ذخیره نقاط داده های قابل دسترسی به راحتی از آن استفاده کنید.
در این مقاله روش استفاده را یاد خواهیم گرفت
localStorageتا به راحتی داده ها را در مرورگر خود ذخیره کنیم. این داده ها به عنوان ذخیره می شوند جفت های کلید-مقدار که کاربر به راحتی می تواند آن را بازیابی کند.
ذخیره داده به localStorage در React بسیار آسان است:
const (data, setData) = useState(());
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, (data));
اگر عجله ندارید و می خواهید در مورد روش عملکرد این روش بیشتر بدانید، به خواندن ادامه دهید!
چیست محل ذخیره سازی?
localStorage یک شی ذخیره سازی وب است که توسعه دهندگان را قادر به ذخیره سازی می کند جفت های کلید-مقدار در یک مرورگر وب و تضمین می کند که این داده ها در همه جا زنده می مانند page حتی زمانی که کاربر مرورگر را می بندد یا راه اندازی مجدد می کند – و تاریخ انقضا ندارد. جفت های کلید-مقدار ذخیره شده می توانند شامل هر نوع داده ای باشند – آرایه ها، اشیاء، رشته ها، اعداد و بسیاری دیگر.
با این حال ، این نمی تواند نقش پایگاه داده ها را در وب سایت ها و برنامه های وب شما جایگزین کند زیرا داده ها وقتی کاربر حافظه نهان مرورگر و ذخیره محلی را پاک می کند – در نهایت ، این است ذخیره سازی محلی و باید به این صورت استفاده شود. با این وجود، موقعیت هایی وجود دارد که کاربر می تواند از آن استفاده کند localStorage، مانند اجرای حالت تاریک ویژگی، تداوم مقدار ورودی فرم کاربر، و بسیاری موارد دیگر.
localStorage دارای روش های داخلی است که به ما امکان می دهد به شی ذخیره سازی مرورگر دسترسی پیدا کنیم. یک مثال این است setItem() روشی که به ما اجازه می دهد یک کلید و یک مقدار به آن اضافه کنیم localStorage، بنابراین ما را قادر می سازد تا داده ها را ذخیره کنیم. روش های دیگری برای بازیابی داده ها استفاده می شود – getItem()، حذف داده ها – removeItem()، همه را پاک کن localStorage موارد – clear()، و غیره روی.
ذخیره سازی داده ها در محل ذخیره سازی با setItem() روش
را setItem() متد به ما اجازه می دهد تا مقادیر هر نوع داده ای را در آن ذخیره کنیم localStorage با تخصیص مقادیر به کلیدها و در نتیجه a جفت کلید-مقدار. این کلید برای بازیابی مقدار مربوطه هر زمان که بخواهیم آن را از آن بازیابی کنیم استفاده می شود localStorage.
توجه داشته باشید: به منظور ذخیره داده ها در localStorage، ابتدا باید آن را به تبدیل کنیم رشته JSON با استفاده از JSON.stringify() تابع. و زمانی که می خواهیم آن را بازیابی کنیم، داده ها را با استفاده از آن تجزیه می کنیم JSON.parse()، رشته JSON را به a تبدیل می کند شی JSON.
هنگام کار با داده ها در React، ما اغلب از آن استفاده می کنیم قلاب ها برای کمک به ما در ذخیره/نگهداری آن. قلاب‌ها همچنین می‌توانند به ما کمک کنند تا آن داده‌ها را کجا آپلود کنیم. این نیز در مورد localStorage زیرا ما از آن استفاده خواهیم کرد useState() و useEffect() قلاب ها این قلاب ها بسیار مهم هستند زیرا useState() hook برای نگهداری و تنظیم داده ها استفاده می شود، در حالی که useEffect() hook به طور پیش فرض پس از اولین رندر و هر زمان که وضعیت به عنوان پارامتر دوم تغییر کند فعال می شود.
پس از توضیح پایه، در اینجا کدی است که برای ذخیره داده ها استفاده می کنیم localStorage:
const (data, setData) = useState(());
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, (data));
ما ابتدا یک حالت ایجاد کرده ایم تا داده هایی را که می خواهیم در خود ذخیره کنیم نگه می دارد localStorageو سپس یک را ایجاد کرده ایم useEffect() hook، با عبور از حالت به عنوان پارامتر دوم. به این ترتیب، هر زمان که وضعیت تغییر می کند، داده ها در localStorage به مقدار فعلی به روز می شود.
ما عملکرد اصلی را که برای کمک به ما در ذخیره سازی داده ها استفاده می شود، در داخل مدیریت کردیم useEffect() hook:
localStorage.setItem('dataKey', JSON.stringify(data));
نتیجه
در این مقاله روش استفاده از قلاب های React را برای ذخیره داده ها در React با استفاده از آن یاد گرفتیم localStorage. همانطور که قبلاً گفته شد ، این هرگز جایگزین نقش یک بانک اطلاعاتی نخواهد شد ، بلکه به ما در ذخیره برخی از داده های مربوط به کاربر که می توانند UI را بهبود بخشند ، کمک می کند اما به معنای ادامه مستقل از مرورگر نیست.
منتشر شده در 1403-01-07 23:41:03
