خیلی وقتا برای هماهنگ کردن تب‌های مرورگر (مثلا وقتی کاربر تو یه تب لاگ‌اوت میکنه یا سبد خریدش رو آپدیت میکنه) میایم سراغ هک localStorage. یعنی یه دیتا مینویسیم و فورا پاک میکنیم تا ایونت storage صدا زده بشه. این روش پر از دردسره، کدهای اضافه زیادی می‌طلبه و کلا از پایه برای این کار ساخته نشده.

راه‌حل نیتیو و اصولی چیه؟ استفاده از BroadcastChannel این API دقیقا برای ارتباط مستقیم بین تب‌ها ساخته شده. نه نیازی به JSON.stringify داره، نه لازم هست ایونت‌های اضافه رو فیلتر کنید و دیتای ساختاریافته رو خیلی راحت منتقل میکنه. فقط یه کانال با اسم مشخص باز میکنید و پیامتون رو می‌فرستید:

توی تب فرستنده:

const channel = new BroadcastChannel('app-sync');
channel.postMessage({ type: 'LOGOUT' });

توی تب‌های گیرنده:

const channel = new BroadcastChannel('app-sync');
channel.onmessage = (event) => {
  console.log(event.data); // { type: 'LOGOUT' }
};

به همین راحتی و تمیزی! فقط یادتون باشه وقتی کارتون تموم شد channel.close() رو صدا بزنید تا ریسورس‌ها آزاد بشن.

@codehalics | کدهالیک