<div id="readability-page-1" class="page"><article>그런데 그거 아세요?
스토리지에 이벤트를 걸 수도 있다는 사실을요.
바로 웹 스토리지 이벤트(web storage event)입니다.
스펙상으로는 아래와 같은 내용을 이벤트로 받을 수 있어요.
<ul>
<li>setItem()으로 아이템을 업데이트한 경우</li>
<li>removeItem()으로 아이템을 지운 경우</li>
<li>clear()로 모든 것을 지운 경우</li>
</ul>
<h2>Event 사용</h2>
이벤트를 거는 방법은 간단합니다.
<div data-language="javascript"><pre><code>window.addEventListener('storage', () =&gt; {
 console.log(JSON.parse(window.localStorage.getItem('sampleList')));
});

window.onstorage = () =&gt; {
 console.log(JSON.parse(window.localStorage.getItem('sampleList')));
};</code></pre></div>
우리가 로컬 스토리지를 사용할때 localStorage라는 싱글톤 객체를 이용하잖아요. 그러니까
<div data-language="javascript"><pre><code>localStorage.addEventListener('storage', ...);</code></pre></div>
이렇게 인스턴스에 직접 이벤트를 거는 사용법이 더 직관적이고 앞으로 확장이 더 용이하지 않을까 생각해 봤어요. <code>storage</code>라는 이벤트가 있다길래 앞뒤 안 가리고 저렇게 시도해 봤다가 안됐었거든요. 아마 저 말고도 몇 분 있을실 것 같아요. :)
<h2>StorageEvent 객체</h2>
다른 이벤트와 동일하게 스토리지 이벤트도 이벤트 객체를 받아서 정보를 얻을 수 있는데요. <code>Event</code>를 상속받는 <code>StorageEvent</code>는 아래와 같은 추가 정보를 갖고 있습니다.
<ul>
<li>key: 변경된 키값</li>
<li>newValue: 변경된 값</li>
<li>oldValue: 변경되기 직전의 값</li>
<li>storage: 변경된 스토리지(localStorage 혹은 sessionStroage)</li>
<li>url: 변경된 대상의 url</li>
</ul>
핸들러에서 일반 이밴트 객체처럼 사용할 수 있어요
<div data-language="javascript"><pre><code>window.addEventListener('storage', (ev) =&gt; {
 console.log(ev.key);
});

localStroage.setItem('myData', 'data1');

// console 출력: 'myData'</code></pre></div>
<h2>어디서 쓰일까?</h2>
스토리지 이벤트는 다양하게 응용될 수 있을 것 같아요.
로컬 스토리지를 간이 상태 관리 도구처럼 사용할 수 있을 것 같습니다. 서로 동기 하기 힘든 환경이나 서로 다른 프레임웍 간의 중계 역할을 할 수 있을 것 같아요. 전역에 있으니까요. 이렇게 레거시나 변경이 힘든 기술 파편화된 대규모의 프로젝트의 경우 적절히 활용할 수 있을 것 같아요.
다중 탭에서 서비스를 사용하는 유저가 한 탭에서 로그아웃을 시도한 경우 이벤트를 활용해 다른 탭도 동시에 로그아웃 상태로 바꾸는 구현도 할 수 있고요. 링크드 인이 이 방식을 사용하는 것 같더군요.
비슷한 맥락으로 탭 간의 실시간 동기화를 구현할 수 있을 것 같습니다. 이렇게 보니 탭 간의 이벤트 기반 메시지 교환 도구로 활용될 수 있겠네요.</article></div>

shiren.dev RSS Feed

세션스토리지(sessionStorage), 로컬스토리지(localStorage)로 구성된 웹 스토리지는 이제 너무 익숙합니다. 다루기 힘들었던 쿠키와는 다르게 클라이언트 저장소로 사용 용도를 명확히 하고 더 나은 사용성으로 이미 우리의 친구가 됐죠. API 프론트엔드 개발자가 자주 다루는 로컬 스토리지는 이런 것들을 할 수 있습니다. storage.length storage.key(n) value = storage.getItem(key) value = sotrage[key] storage.setItem(key, value) sto…

알쓸FE팁 "웹스토리지 이벤트"

댓글