آموزش React localStorage جاوا اسکریپت

قلب هر اپلیکیشنی که با react توسعه داده شده،state است.کامپوننت های میتوانند state های داخلی خود را داشته باشند و به عقیده من با توجه به سادگی آن میتوان کارهای خیلی باحالی انجام داد.بیایید تصور کنیم شما در حال ساختن و ایجاد یک برنامه عالی هستید و نیاز دارید اطلاعات کاربر رو به صورت local بر روی مرورگر ذخیره کنید و در کامپوننت های مختلف استفاده کنید.میخواهید بدانید چگونه از localStorage در برنامه خود استفاده کنید در حالی که setState اینکار را برای شما انجام نمیدهد.در ادامه با من همراه باشید تا روش ذخیره سازی اطلاعات به صورت local در react را یاد بگیرید.

قلب هر اپلیکیشنی که با react توسعه داده شده،state است.کامپوننت های میتوانند state های داخلی خود را داشته باشند و به عقیده من با توجه به سادگی آن میتوان کارهای خیلی باحالی انجام داد.بیایید تصور کنیم شما در حال ساختن و ایجاد یک برنامه عالی هستید و نیاز دارید اطلاعات کاربر رو به صورت local بر روی مرورگر ذخیره کنید و در کامپوننت های مختلف استفاده کنید.میخواهید بدانید چگونه از localStorage در برنامه خود استفاده کنید در حالی که setState اینکار را برای شما انجام نمیدهد.در ادامه با من همراه باشید تا روش ذخیره سازی اطلاعات به صورت local در react را یاد بگیرید.

Web Storage API
Web Storage در واقع یک API برای ذخیره سازی data در مرورگر است که در مقایسه با نسخه قبلی cookies ها پیشرفت قابل توجهی داشته است.در ابتدا به عنوان یک API در HTML5 معرفی شد و بعدا تکامل یافت و به یک ویژگی مستقل تبدیل شد.این API در تمامی مروگر ها و حتی نسخه های قدیمی IE به صورت native پشتیبانی می شود.Web Storage به دو روش مختلف در مرورگرها پیاده سازی می شود: localStorage (یک حافظه پایدار ، که می تواند با کوکی های همیشگی مقایسه شود) و sessionStorage (ذخیره ای که برای مدت زمان sessionباقی بماند و قابل مقایسه با کوکی های session است) .اگرچه در  این مقاله بر localStorage تمرکز داریم ، می توانید در هنگام استفاده از sessionStorage همان اصول و قوانین را نیز اعمال کنید.

ما به یک کامپوننت نیاز داریم تا هدف خودمون در این مقاله را باهاش پیش ببریم.من فکر میکنم یک صفحه ورود با گزینه “مرا به خاطر بسپار” یک گزینه عالی برای اینکار باشد.به خاطر سادگی ، ما فیلد رمز ورود را وارد نمی کنیم . بیایید render method آن را بررسی کنیم:

نتیجه گیری
استفاده از localStorage با React بسیار ساده است. فقط دریابید که بهترین لحظه ها برای ذخیره و بازیابی اطلاعاتتان چه موقع اسن.این کامپوننت به کامپوننت تغییر خواهد کرد.
به طور کلی شما میتوانید بازیابی اطلاعات را هم در componentDidMount و هم در constructor انجام دهید.اما توجه داشته باشید اگر قصد دارید اینکار را در constructor انجام دهید باید مقدار آن را به صورت مستقیم به state تخصیص دهید.
اگر این مقاله براتون مفید بود اون رو در شبکه های اجتماعی خودتون به اشتراک بزارید.همچنین اگر قصد دارید به یک برنامه نویس حرفه ای React تبدیل بشید، دوره آموزش جامع ReactJs را مشاهده کنید.

نویسنده
پوریا سبحانلو

پوریا سبحانلو

سلام من پوریا هستم

چند سالی هست تو وب فعال هستم و برنامه نویسی میکنم

اوایل با php کار میکردم بعد ها سریع به پلتفرم های جاوا اسکریپت علاقه مند شدم و الان در حال یادگیری React هستم