ویژگی تصویر

رویداد onstorage در JavaScript

  /  جاوا اسکریپت   /  رویداد onstorage در جاوا اسکریپت
بنر تبلیغاتی الف
جاوااسکریپت - JavaScript

در این بخش به بررسی رویداد onstorage در جاوا اسکریپت می پردازیم، در دنیای مدرن توسعه وب، ذخیره‌سازی داده‌ها به صورت محلی روی مرورگر کاربران برای ایجاد تجربه‌های کاربری بهتر اهمیت بالایی دارد. یکی از روش‌های متداول برای این کار استفاده از Local Storage است که به برنامه‌نویسان امکان می‌دهد داده‌های خود را در مرورگر کاربر ذخیره کنند. اما پرسش اصلی اینجاست که چگونه می‌توانیم تغییرات این داده‌ها را به صورت لحظه‌ای مدیریت و پیگیری کنیم؟ برای این منظور، جاوا اسکریپت مکانیزم بسیار مهمی به نام “رویداد onstorage” ارائه می‌دهد که امکان پیگیری تغییرات در Local Storage را فراهم می‌کند.

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

رویداد onstorage چیست؟

رویداد onstorage یک رویداد خاص در جاوا اسکریپت است که زمانی که یک تغییر در داده‌های ذخیره‌شده در Local Storage رخ می‌دهد، فعال می‌شود. این رویداد زمانی مفید است که وب‌سایت یا برنامه وب شما در چند تب یا پنجره باز باشد و تغییرات ذخیره‌سازی باید در همه تب‌ها به‌روزرسانی شوند. مهم است که بدانیم رویداد onstorage فقط زمانی فعال می‌شود که تغییرات در Local Storage در تب یا پنجره دیگری انجام شود.

نحوه عملکرد رویداد onstorage

رویداد onstorage به‌صورت خودکار هر بار که داده‌ای در Local Storage تغییر می‌کند، فعال می‌شود، اما این رویداد تنها در اسناد (تب‌ها یا پنجره‌های) دیگری که تغییرات را مشاهده می‌کنند، رخ می‌دهد و نه در تب یا پنجره‌ای که تغییر را اعمال کرده است. به بیان دیگر، اگر در یک تب داده‌ای را تغییر دهید، رویداد onstorage در آن تب فعال نمی‌شود، بلکه فقط در سایر تب‌ها و پنجره‌های مرتبط که از همان دامنه استفاده می‌کنند، اتفاق می‌افتد.

تماشا در حالت تمام صفحه

پارامترهای رویداد onstorage

زمانی که رویداد onstorage فعال می‌شود، اطلاعات مفیدی به عنوان پارامترهای رویداد فراهم می‌شوند که به ما کمک می‌کنند تا بتوانیم نوع تغییرات را شناسایی کنیم. برخی از این پارامترها عبارتند از:

  • key: کلیدی که تغییر کرده است.
  • oldValue: مقدار قدیمی که قبل از تغییر در Local Storage ذخیره شده بود.
  • newValue: مقدار جدیدی که بعد از تغییر در Local Storage ذخیره شده است.
  • url: آدرس (URL) صفحه‌ای که تغییر را اعمال کرده است.
  • storageArea: شیء مربوط به محل ذخیره‌سازی (معمولاً Local Storage یا Session Storage).

هر یک از این پارامترها به توسعه‌دهنده این امکان را می‌دهد که تغییرات را با جزئیات بیشتری مدیریت کند.

کاربردهای عملی رویداد onstorage

رویداد onstorage دارای کاربردهای بسیاری در توسعه وب است. یکی از مهم‌ترین استفاده‌های آن همگام‌سازی داده‌ها بین چندین تب یا پنجره مرورگر است. فرض کنید کاربری در یک تب داده‌ای را در Local Storage تغییر می‌دهد؛ حالا می‌خواهید که تب‌های دیگر نیز از این تغییر مطلع شوند و رابط کاربری خود را به‌روزرسانی کنند. در اینجا رویداد onstorage به کمک می‌آید و همگام‌سازی اطلاعات را به‌صورت خودکار انجام می‌دهد.

مثال همگام‌سازی وضعیت ورود کاربر

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

تماشا در حالت تمام صفحه

مثال دیگری: مدیریت تم سایت

فرض کنید وب‌سایت شما دارای دو تم روشن و تاریک است و می‌خواهید کاربر بتواند تم خود را بین تب‌ها تغییر دهد و این تغییر در همه تب‌ها منعکس شود. با استفاده از رویداد onstorage، می‌توانید این همگام‌سازی را به راحتی پیاده‌سازی کنید.

تماشا در حالت تمام صفحه

تفاوت Local Storage و Session Storage

قبل از ادامه بحث درباره رویداد onstorage، بهتر است تفاوت بین Local Storage و Session Storage را مرور کنیم. این دو مکانیزم برای ذخیره داده‌ها در سمت مرورگر استفاده می‌شوند، اما تفاوت‌هایی با یکدیگر دارند:

  • Local Storage: داده‌ها تا زمانی که به‌طور دستی حذف نشوند، باقی می‌مانند و حتی با بسته شدن مرورگر نیز حذف نمی‌شوند.
  • Session Storage: داده‌ها فقط در طول یک جلسه مرورگر ذخیره می‌شوند و با بسته شدن تب یا پنجره مرورگر، از بین می‌روند.

رویداد onstorage تنها برای تغییرات در Local Storage فعال می‌شود و برای Session Storage قابل استفاده نیست.

نکات مهم درباره استفاده از onstorage

هنگام استفاده از رویداد onstorage، توجه به چند نکته مهم است:

  1. محدودیت دامنه (Scope): رویداد onstorage فقط برای تغییرات در دامنه فعلی فعال می‌شود. یعنی اگر دو وب‌سایت با دامنه‌های متفاوت از Local Storage استفاده کنند، رویداد onstorage در آن‌ها تداخلی نخواهد داشت.
  2. عملکرد آفلاین: Local Storage حتی در حالت آفلاین نیز کار می‌کند، اما رویداد onstorage در حالت آفلاین فعال نمی‌شود، زیرا نیازی به همگام‌سازی بین تب‌ها در این شرایط وجود ندارد.
  3. مشکلات امنیتی: اگر از Local Storage برای ذخیره اطلاعات حساس استفاده می‌کنید، باید مراقب باشید که اطلاعات به درستی رمزنگاری شده باشند. اطلاعات ذخیره‌شده در Local Storage توسط هر اسکریپتی که در همان دامنه اجرا می‌شود قابل دسترسی است، بنابراین استفاده نادرست از آن می‌تواند منجر به مشکلات امنیتی شود.

رویداد onstorage یک ابزار قدرتمند در جاوا اسکریپت است که به توسعه‌دهندگان امکان می‌دهد تغییرات در Local Storage را پیگیری کرده و به این تغییرات واکنش نشان دهند. این رویداد به‌خصوص در مواقعی که نیاز به همگام‌سازی داده‌ها بین چندین تب یا پنجره مرورگر داریم، بسیار مفید است. با استفاده از این رویداد، می‌توانیم تجربه کاربری بهتری را برای کاربران فراهم کنیم و اطمینان حاصل کنیم که داده‌ها همیشه به‌روز و هماهنگ هستند.

منابع

آیا این مطلب برای شما مفید بود ؟

خیر
بله
بنر تبلیغاتی ج