저장소 이벤트 수신하기

localStorage가 변경되면 웹 저장소는 동일 출처의 다른 모든 탭에서 storage 이벤트를 발생시킵니다. 이는 같은 앱의 여러 탭을 동기화하는 가장 간단한 방법으로, 로그아웃이나 테마 변경을 전달할 때 사용할 수 있습니다.

window에 처리기를 연결하십시오: window.addEventListener("storage", handleStorage). 수신기는 동일 출처의 다른 탭이나 창에서만 실행됩니다. 변경을 수행한 탭은 이미 업데이트를 알고 있으므로 그 탭에서는 실행되지 않습니다.

이벤트에는 변경된 키인 key, 문자열 또는 null인 oldValue와 newValue, 변경을 발생시킨 페이지인 url, 그리고 Storage 객체인 storageArea(localStorage 또는 sessionStorage)가 포함됩니다.

다른 탭에서 localStorage.clear()를 호출하면 저장소 이벤트가 한 번 발생하며, 이때 key === null이고 oldValue와 newValue도 모두 null입니다. 단일 키 업데이트와 전체 삭제를 구분하려면 이 패턴을 감지하십시오.

removeItem을 호출하면 newValue === null인 이벤트가 발생하고 oldValue에는 이전 문자열이 들어 있습니다. newValue가 문자열 "null"이 아니라 엄밀히 null인지 확인하여 "키 삭제"와 "키에 null 문자열 설정"을 구분하십시오.

변경을 기록한 탭에서는 이벤트가 절대 실행되지 않습니다. 자체 기록에도 반응하려면 setItem 후에 사용자 지정 이벤트를 발생시키거나, 저장 기능과 앱 내부 이벤트 버스를 모두 호출하는 도우미로 setItem을 감싸십시오.

사용자가 로그아웃할 때 타임스탬프와 함께 auth:logout과 같은 키를 설정하십시오. 다른 탭은 저장소 이벤트에서 해당 키를 감지하고 자체 세션 상태를 즉시 삭제한 다음 로그인 페이지로 이동하므로, 사용자가 다시 클릭할 필요가 없습니다.

사용자가 한 탭에서 테마를 전환하면 theme을 localStorage에 기록하십시오. 다른 모든 탭의 저장소 처리기는 새 값을 읽고 document.documentElement.dataset.theme을 적용하므로 변경 사항이 열려 있는 모든 탭에 즉시 나타납니다.

하나의 처리기가 e.key를 기준으로 분기하여 여러 기능을 처리할 수 있습니다. switch 전환문을 사용하면 디스패처를 읽기 쉽게 유지할 수 있습니다. 각 분기에서 하나의 저장소 키를 처리하고, 다른 기능이 동일한 Storage에 기록한 관련 없는 변경은 무시합니다.

sessionStorage는 탭마다 পৃথ도로 존재하므로, 한 탭에서 기록해도 각 탭이 독립적인 sessionStorage를 사용하기 때문에 다른 탭에서 저장소 이벤트가 발생하지 않습니다. 탭 간 신호 전달이 필요하다면 키를 곧바로 삭제하더라도 localStorage를 사용하십시오.

더 풍부한 탭 간 메시지 전달이 필요하다면 BroadcastChannel 기능을 사용해 저장소에 접근하지 않고 구조화된 데이터를 보낼 수 있습니다: new BroadcastChannel("app").postMessage({ type: "logout" }). 일시적인 신호에는 BroadcastChannel을 사용하고, 저장소 이벤트는 계속 유지해야 하는 상태에 사용하십시오.

Tab A에서 localStorage.setItem("theme", "dark")를 호출하면 어떤 탭이 저장소 이벤트를 받습니까?

저장소 이벤트는 다른 탭에서 localStorage가 변경될 때마다 탭 간 알림을 전달하며, key, oldValue, newValue 및 storageArea를 포함합니다. 기록한 탭에서는 실행되지 않으므로 전체적인 로컬 및 원격 디스패치를 위해 사용자 지정 이벤트와 함께 사용하십시오. 로그아웃 전달, 테마 동기화, 브라우저 창 간에 일관되게 유지해야 하는 모든 상태에 활용할 수 있습니다.