آموزش ذخیره دادهها در Local Storage با JavaScript
۲۸ فروردین ۱۴۰۰
Local Storage به ما اجازه میدهد تا دادههایی با فرمت JSON را در مرورگر کاربر ذخیره کنیم و به این صورت از پاک شدن برخی دادهها پس از بسته شدن مرورگر کاربر جلوگیری میشود اما باید درنظر داشته باشید که با محدودیت ۵ مگابایتی Local Storage روبرو هستید بنابراین اکثر افراد از این فضا بهمنظور نشان دادن وبسایت به کاربر در حالت آفلاین استفاده میکنند.
اکنون که تا حد قابل قبولی با Local Storage آشنا شدید بهسراغ نحوهی استفاده از آن در زبان JavaScript میرویم. برای دسترسی به این حافظهی ذخیرهسازی از localStorage
که یکی از propertyهای window
است، استفاده میکنیم و localStorage
چندین متد در اختیار ما قرار میدهد که میتوانیم عملیات Write، Read و Delete را پیادهسازی کنیم:
setItem()
getItem()
removeItem()
clear()
احتمالا بهعنوان یک برنامهنویس میتوانید تشخیص دهید که از setItem()
برای نوشتن دادهها در Local Storage استفاده میشود:
let usersArray = {
id: 1,
name: "Mohammad Amin"
}
localStorage.setItem('users', JSON.stringify(usersArray));
برای خواندن دادههای موجود در Local Storage از getItem()
استفاده میکنیم:
const data = JSON.parse(localStorage.getItem('users'));
console.log(data);
برای حذف دادههای ذخیره شده در Local Storage دو راه حل پیش روی شما قرار دارد. اگر بخواهید فقط دادهی خاصی را حذف کنید بنابراین removeItem()
نیاز شما را برطرف میکند:
localStorage.removeItem('users');
اما اگر بخواهید تمام دادههای ذخیرهشده را به یکباره حذف کنید، راه حل ساده است و با اجرای کد localStorage.clear();
تمام دادههای ذخیره شده در Local Storage که بهواسطهی این Domain ذخیره شده بودند، پاک خواهد شد.
نکتههای دیگری نیز وجود دارد که باید به آنها توجه داشته باشید:
- دادههای حساس کاربر را بههیچوجه در Local Storage ذخیره نکنید.
- شاید شباهتهایی میان عملکردهای Local Storage و دیتابیسهای مبتنی بر سرور وجود داشته باشد اما توجه داشته باشید که این اطلاعات فقط در مرورگر کاربر ذخیره میشوند.
- همانطور که قبلتر اشاره کرده بودیم باید حواستان به محدودیت ۵ مگابایتی Local Storage باشد.
- Local Storage بهطور کلی ناامن است زیرا هیچ لایهی حفاظتی ندارد.
- آخرین موردی که میخواهیم به آن بپردازیم، Synchronous بودن Local Storage است که با مطالعهی مقالهی Synchronous و Asynchronous چیست؟ میتوانید اطلاعات بیشتری از ماهیت آن پیدا کنید.
منبع: https://hackernoon.com/what-is-local-storage-in-javascript-and-how-to-use-it-4q1033yv
توسعهدهندگان دربارهی ما چه میگویند
تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...
MohammadReza
keikaavousi
بعد از بسته شدن @fandoghpaas و ناراحتی همهمون از اینکه یه سرویس خوب و صادق نمیتونه از پس هزینهها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوتهایی داشت که کمی کار میخواست ولی تا الان کاملا راضی.
jadi
jadi
یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.
Arch
EbadiDev
واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیتهای سرویس دیتابیسشون اینه که خودشون به صورت دورهای بکآپ میگیرن.
...
Ali Najafi
me_ali_najafi
یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@
Navid
1navid
عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم
Amir H Shekari
vanenshi