ie에서 localStorage가 여러 창에서 동기화 되지 않는 문제

이번에 로컬스토리지에 데이터를 저장하도록 만든 기능이 있었는데

ie에서 여러 창, 탭으로 앱을 띄웠을 때, ls에 저장된 데이터가 동기화가 되지 않는 이슈가 생겼다

좌 ie 우 크롬

이왜진…🤦‍♀️🤦‍♀️🤦‍♀️ 다른 브라우저에서는 잘만 되는데…

또다시 킹택갓버플로우의 도움을 받아 이 문제를 해결할 수 있었다.

코드 단 한줄만 쳐주면 된다!

window.addEventListener('storage', (event) => {
  // 뭔가 로직이 필요하다면 여기에 작성
})

window 객체의 storage 이벤트는 로컬스토리지에 변화가 생길때 트리거 된다고 하는데

ie에서도 탭,창간 동기화가 바로바로 되도록 하려면 이 리스너를 달아주어야 한다.

만약 angular를 사용한다면 이 기능이 필요한 컴포넌트에 HostListener 데코레이터가 달린 함수를 추가해주면 되겠다

@HostListener('window:storage', ['$event'])
onStorage(event: StorageEvent): void {
  // 마찬가지로 로직이 필요하다면 여기에 작성
}

그럼 요렇게 잘 된다 으메이징

빨리 내년이 되어서 ie가 사라졌으면 좋겠따!