LocalStorage در جاوااسکریپت چیست و چه کاربردی دارد ؟

Posted on 5 ساعت ago

46 second read

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

LocalStorage در جاوااسکریپت چیست و چه کاربردی دارد ؟

LocalStorage بخشی از استاندارد Web Storage API است که برای نگهداری داده‌های سمت کاربر طراحی شده. داده‌ها به‌صورت کلید‑مقدار (key‑value) در مرورگر نگهداری می‌شوند. این داده‌ها فقط متنی هستند (string) و محدود به دامنه‌ی وب‌سایت ارائه‌کننده‌ هستند.

برخلاف کوکی‌ها، داده‌های LocalStorage با درخواست‌های HTTP ارسال و دریافت نمی‌شوند و فقط توسط جاوااسکریپت می‌توانند ذخیره و بازیابی فروش بک لینک شوند که این موضوع باعث بهبود کارایی نسبت به کوکی‌ها می‌شود.

تفاوت LocalStorage با کوکی چیست ؟

ماندگاری داده‌ها در LocalStorage

داده‌ها در LocalStorage تا زمانی که به‌صورت دستی حذف یا مرورگر پاک‌سازی شود باقی می‌مانند. برخلاف SessionStorage که فقط تا پایان همان تب یا نشست فعال است، LocalStorage پس از بسته شدن مرورگر نیز حفظ می‌شود.

در نتیجه، اطلاعات می‌توانند «دائمی» باشند، ولی دائمی بودن کامل وابسته به سیاست‌های مرورگر و رفتار کاربر (مثل پاک کردن Cache یا استفاده از حالت Private/Incognito) است.

ذخیره و بازیابی داده‌ها در LocalStorage

انجام این‌کار با استفاده از جاوااسکریپت به آسانی قابل انجام است. به مثال‌های زیر توجه کنید:

ذخیره‌سازی نام کاربر و نمایش آن در صفحات دیگر:

امنیت در LocalStorage

کاربرد LocalStorage برای بهبود عملکرد سیستم طراحی شده است و زیرساخت‌های امنیتی برای داده‌های حساس را ندارد.

داده‌ها بدون رمزگذاری روی دیسک ذخیره می‌شوند.

هر شخص یا افزونه‌ای که دسترسی به مرورگر کاربر دارد (مثلا در حالت هک یا بدافزار) می‌تواند آن‌ها را بخواند.

فقط اسکریپت‌هایی از همان دامنه قادر به خواندن یا تغییرآن‌ها هستند. اما خطر اصلی XSS (Cross‑Site Scripting) است.

با توجه به نکات بالا،‌ برنامه‌نویس باید دقت کافی داشته باشد تا اطلاعات حساس و خصوصی را در این سیستم ذخیره نکند.

مشاهده و تغییر داده‌ها

فقط صفحه یا اسکریپت‌هایی در همان origin (ترکیب دامنه + پروتکل + پورت) قادر به مشاهده و تغییر هستند.
کاربران می‌توانند داده‌ها را از طریق کنسول مرورگر مشاهده و ویرایش کنند.
سایت‌های دیگر یا تب‌های خارج از دامنه، امکان مشاهده یا تغییر ندارند.

محدودیت حجم

محدودیت‌های حجم روی مرورگرهای مختلف متفاوت است و مقادیر زیر ممکن است دقیق نباشند. بهتر است حجم را به ۵ مگابایت محدود کنید تا با مشکلی روبرو نشوید.

Chrome / Edge / Firefox
۵ تا ۱۰ مگابایت

Safari (iOS/macOS)
حدود ۵ مگابایت

Opera / Brave
حدود ۵ مگابایت

داده‌ها باید رشته‌ای باشند. برای ساختارهای بزرگ می‌توان از داده‌های جیسون(JSON) استفاده کنید.
ذخیرهٔ داده‌های چند ده کیلوبایتی (مثل تنظیمات، کش تصاویر کوچک یا وضعیت سشن) عملی و سریع است، اما برای داده‌های حجیم بهتر است از روش‌های دیگر و مطمئن‌تر استفاده کنید.

چه داده‌هایی را می‌توان در LocalStorage ذخیره کرد ؟

به طور کلی اطلاعاتی که دسترسی به آن در تمام درخواست‌ها ضروری است و اطلاعات حساس به حساب نمی‌آیند و حجم آن کمتر از ۵ مگابایت باشد می‌تواند در LocalStorage نگهداری شود. مواردی مثل:

پیکربندی یا ترجیحات کاربر (نمای تیره، زبان، موقعیت منو)

اطلاعات وضعیت موقت (progress فرم، آخرین صفحه مشاهده‌شده)

کش داده‌های API سبک

اطلاعات متنی یا JSON با حجم کمتر از چند صد کیلوبایت

برای داده‌های ساختاریافته سنگین‌تر (عکس، ویدئو، فایل) باید از IndexedDB یا Cache Storage استفاده شود.

اشتراک داده‌ها بین تب‌ها

LocalStorage به‌صورت اشتراکی بین تمام تب‌های یک دامنه عمل می‌کند. اگر در یک تب داده تغییر کند، تب دیگر به آن اطلاعات دسترسی دارند. اما مرورگر تا زمان وقوع رویداد storage ، این تغییر را به تب‌های دیگر اطلاع نمی‌دهد.

مرورگر رویدادی به نام storage دارد. با تعریف یک رویداد روی آن به شکل زیر می‌توانید از تغییر داده‌ها در تب‌های دیگر باخبر شوید و واکنش مناسب را به کاربر نشان دهید.

نکته: این رویداد در تب‌های دیگر قابل استفاده است و در تبی که تغییر را انجام داده است، فراخوانی نمی‌شود.

روش‌های دیگر ذخیره‌سازی در مرورگر

علاوه بر LocalStorage روش‌های دیگری برای نگهداری اطلاعات وجود دارد که هر کدام کاربردها و ویژگی‌های منحصر به فردی دارند. با دانستن این تفاوت‌ها و ویژگی‌ها می‌توانید برای کاربردهای مختلف روش‌های مناسب‌تری را انتخاب کنید.

سرعت و کارایی

LocalStorage بسیار سریع‌تر از کوکی‌ها است زیرا:

در حافظه‌ی مرورگر نگهداری می‌شود.

نیازی به ارسال در هر درخواست HTTP ندارد.

عملیات خواندن و نوشتن آن تقریبا فوری است (در حد چند میلی‌ثانیه برای کیلوبایت‌ها).

اما در داده‌های سنگین‌تر از چند مگابایت، سرعت افت می‌کند و ممکن است در عملیات I/O یا تبدیل JSON تاخیر واضح دیده شود. برای چنین کاربردهایی، IndexedDB انتخاب بهینه‌تری است (به‌ویژه در اپلیکیشن‌های PWA یا داشبوردهای بزرگ).