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