آموزش ذخیره داده‌ها در Local Storage با JavaScript


۲۸ فروردین ۱۴۰۰
آموزش ذخیره داده‌ها در 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));
استفاده از متد setitem برای ذخیره‌ی داده‌ها در local storage

برای خواندن داده‌های موجود در Local Storage از getItem() استفاده می‌کنیم:

const data = JSON.parse(localStorage.getItem('users')); 
console.log(data);
استفاده از متد getitem برای دریافت داده‌ها از local storage

برای حذف داده‌های ذخیره شده در 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

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi