آموزش ذخیره داده‌ها در 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 چیست؟ می‌توانید اطلاعات بیشتری از ماهیت آن پیدا کنید.

مقایسه‌ی Local Storage با سایر گزینه‌های ذخیره‌سازی در مرورگر

در کنار Local Storage، مرورگر امکانات دیگری برای ذخیره‌سازی داده‌ها در اختیار توسعه‌دهندگان قرار می‌دهد که بسته به نوع پروژه و نیازهای آن، ممکن است انتخاب بهتری باشند:

۱. Session Storage

• مشابه Local Storage عمل می‌کند، اما داده‌ها تنها تا زمانی که تب مرورگر باز است نگهداری می‌شوند.
• به‌درد داده‌های موقتی و حساس می‌خورد که پس از بسته شدن تب نیازی به نگهداری آن‌ها نیست.
• ظرفیت ذخیره‌سازی نیز حدود ۵ مگابایت است.

۲. Cookies

• از گذشته تا به امروز برای ذخیره‌ی اطلاعات کوچک و تبادل آن‌ها با سرور در هر درخواست HTTP استفاده می‌شود.
• برخلاف Local Storage، کوکی‌ها همراه درخواست‌های سرور ارسال می‌شوند و مناسب برای داده‌هایی مثل اطلاعات احراز هویت هستند.
• محدودیت حجمی بسیار کمتری دارند (در حدود ۴KB برای هر کوکی).

۳. IndexedDB

• یک دیتابیس NoSQL سمت کلاینت با قابلیت ذخیره‌سازی حجم بالایی از داده‌ها (حتی تا صدها مگابایت).
• امکان کوئری‌نویسی پیچیده، ذخیره‌سازی اشیاء و تعامل آفلاین را فراهم می‌کند.

منبع: https://hackernoon.com/what-is-local-storage-in-javascript-and-how-to-use-it-4q1033yv