[React] localStorage에 데이터가 바로 저장되지 않는 경우

데이터를 검색하고 새로고침 했을 때 검색한 데이터가 계속 유지되도록 하기 위해서 sessionStorage와 localStorage를 이리저리 만져보고 있었다.

<Button variant='contained' color='error'

      onClick={() => {

            localStorage.setItem('siteSeq', oneTag.siteSeq);

            window.open('/myPage', '_blank');

      }}

>

      이동하기

</Button>

다른 페이지에서 myPage로 이동할 때 localStorage에 oneTag의 siteSeq 값이 siteSeq라는 key 값으로 저장되도록 설정하였다.

 

하지만 페이지를 이동하였을 때 localStorage에 siteSeq 값이 저장되어 있지 않았다!

일반적으로 sessionStorage와 localStorage는 key-value를 set 하면 바로 적용이 된다라고 알고 있었기 때문에 굉장히 당황했었다.

 

찾아보니 localStorage.setItem() 메소드가 어떤 함수 내에 있을 때, setItem이 컴포넌트의 재실행에 의한 트리거가 실행되지 않았을 경우라고 한다. 저 트리거는 무엇에 의해 일어나느냐?

The storage event of the Window interface fires when a storage area (localStorage) has been modified.The storage event is only triggered when a window other than itself makes the changes.

storage setItem, 즉 localStorage.setItem()과 sessionStorage.setItem() 이벤트는 storage가 변경될 때 갱신되는 것이 아니라 window가 변경될 때만 트리거가 실행된다는 것이다.

(해당 인용은 아래의 참조 사이트 중 2번째 사이트에서 확인할 수 있다. 한국어를 지원하기는 하나, 해당 Note를 확인할 수 없다.)

 

위의 코드처럼 onClick() 내부에 localStorage가 trigger 되는 코드가 있으면, window는 변경사항을 알지 못하고 넘어가는 것이다.

현재는 로직을 바꿔 localStorage에 값을 저장하고 있지 않지만, 위의 기능이 동작하도록 하고 싶다면 코드를 다음과 같이 작성할 수 있다.

useEffect(() => {
	if(oneTag.isEmpty()) {
    	return
    }
    localStorage.setItem('siteSeq', oneTag.siteSeq);
}, [oneTag]);

컴포넌트가 재실행될 때마다 DOM이 알 수 있도록 useEffect를 통해 oneTag의 값이 변경될 때마다 localStorage.setItem()이 실행되도록 할 수 있다.

onClick()과 같은 이벤트에 의한 trigger가 아닌, 컴포넌트의 재실행에 의해 trigger가 실행되기 때문에 최신의 localStorage 데이터를 얻을 수 있다.

 

---

[ 참고 ]

https://velog.io/@tchaikovsky/REACT-localstorage가-바로-저장되지-않는다면

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event