브라우저 탭간에 데이터를 공유하는 방법

탭간에 데이터를 공유해야하는 요구사항이 있었습니다.

이때 전제조건은 아래와 같습니다.

1. 탭간에 데이터를 공유해야한다.
2. 브라우저가 모두 닫혔을때는 데이터도 사라져야한다.

이제 어떻게 구현할지 생각해볼까요?

 

 

1.window.localStorage

첫번째 조건만 봤을때는 localStorage를 통해 데이터를 저장하고 eventListener를 통해 탭간에 데이터를 받을 수 있을것 같습니다.

하지만 브라우저가 닫혔을때 데이터가 사라져야하고 이를 수행하기 위해서는 또 다른 코드들을 만들어야합니다. 뭔가 더 나은 대안이 있을것 같습니다

 

 

2. window.postMessage

postMessage로 데이터를 송수신하는 방법을 생각해보았습니다.

다만 postMessage의 경우 아래의 상황에서만 사용할 수 있었기 때문에 사용할 수 없었습니다.

• Window.opener(새 창을 만든 window를 참조할 때)
• HTMLIFrameElement.contentWindow (부모 window에서 임베디드된 iframe을 참조할 때)
• Window.parent (임베디드된 iframe에서 부모 window를 참조할 때)
• Window.frames + an index value (named or numeric).

 

3. Broadcast Channel Api

The Broadcast Channel API allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin.

요구사항에 딱 맞는 기능인것 같습니다.

다만 can i use 를 보게 되면 비교적 최신 브라우저만 지원합니다.

low version 브라우저 또한 대응해야하는 상황에서 해당 api는 사용할 수 없을것 같습니다.

 

 

4. broadcast-channel 라이브러리

broadcast channel api와 유사한 동작을 하는 라이브러리입니다.

유사한 동작을 한다 라고 한 이유는 ie를 제외한 모든 브라우저에서 제공하지만 내부 구현은 broadcast channel api와 다르기 때문입니다.

하지만 요구사항을 충족할 뿐만 아니라 low version 브라우저 대응도 되기 때문에 쓰기엔 무리가 없을것 같습니다.

 

 

TLDR

탭간에 데이터를 공유해야하고 브라우저가 닫혔을때 데이터가 유지되어서는 안된다면 broadcast channel api를 활용해보자.

low version browser를 대응해야한다면 broadcast-channel 라이브러리가 적절한 대안이 될 수 있다.