로컬스토리지와 세션스토리지는 모두 클라이언트 측 웹 스토리지 옵션으로, 브라우저에서 데이터를 임시 또는 영구적으로 저장하는 데 사용된다. 이 둘은 비슷한 듯 다른데, 오늘 한 번 정리해보려고 한다.
로컬스토리지와 세션스토리지의 유사점
- key-value pair로 데이터를 저장해 두고, key를 사용하여 저장된 데이터에 접근할 수 있다.
- Map과 유사하여 setItem/getItem/removeItem을 지원한다.
- key와 value는 반드시 문자열이어야 한다.
API
- setItem(key, value) - key-value pair를 보관한다.
- getItem(key) - key에 해당하는 데이터를 받아온다.
- removeItem(key) - key에 해당하는 데이터를 삭제한다.
- clear() - 모든 데이터를 삭제한다.
- key(index) - 인덱스에 해당하는 키를 받아온다.
- Object.keys - key 전체를 얻는다.
로컬스토리지와 세션스토리지의 차이점
- 데이터 수명
| 로컬스토리지 | 세션스토리지 |
| 사용자가 삭제하지 않는 한 영구적으로 유지된다. 브라우저를 종료하거나 컴퓨터를 재시작해도 데이터가 유지된다. | 세션 스토리지에 저장된 데이터는 해당 브라우저의 세션이 종료되면 자동 삭제된다. |
- 공유 범위
| 로컬스토리지 | 세션스토리지 |
| 동일한 도메인 내의 다른 페이지 또는 다른 탭에서도 동일한 로컬스토리지 데이터에 접근할 수 있다. | 해당 세션에만 고유하기 때문에 동일한 세션 내에서만 공유된다. |
- 용도
| 로컬스토리지 | 세션스토리지 |
| 사용자의 지속적인 데이터 보존이 필요할 때 적합하다. 사용자 설정, 로그인 정보 등을 저장하는 데 사용할 수 있다. | 사용자의 세션 동안만 데이터를 보존해야 하는 경우에 유용하다. 장시간 작업중인 웹 어플리케이션에서 일시적인 데이터를 저장하는 데 사용할 수 있다. |
최근에 활용해 본 로컬스토리지
새로고침 시에도 로그인 상태가 유지되도록 로그인 할 때 사용자 정보를 로컬스토리지에 저장해 두기로 했다.
와중에 코드... 1분만에 만료되는 액세스토큰을 요청하고 있다ㄷㄷ
처음에는 accessToken만 저장할까 하다가, 나중에 닉네임, 아바타 정보도 활용해야 했기 때문에 아예 response 객체 전체를 저장하게 되었다.
로컬스토리지는 문자열 형태로만 저장 가능하기 때문에 JSON.stringify 해준다. 나중에 저장해 놓은 데이터를 활용할 때는 JSON.parse 해서 다시 객체로 만들어 사용하면 된다.
사용자가 로그인한 뒤 페이지를 여기저기 이용하다가, 서버로부터 부여받은 accessToken이 만료되면 재로그인을 유도하도록 하는 코드이다.
로컬스토리지에서 받아온 데이터 중에서 accessToken만 뽑아낸다. headers에 넣어서 서버에 해당 토큰이 여전히 유효한지를 확인받는다. 토큰이 잘 살아있다면 문제 없이 사이트를 이용할 수 있고, 토큰이 만료되었다면 사용자에게 안내하고, 로그아웃 로직을 실행한다.
지금 보니까 intercepter 사용해서 리팩터링 해볼 수 있을 것 같다.
사용자가 '로그아웃' 버튼을 클릭하면, userLogout Slice에 의해 사용자의 상태가 초기화되고, 로컬스토리지에 저장되어 있는 정보도 비워준다.
removeItem()해주면 간단히 해결!
처음에 튜터님이 사용자의initial state에 accessToken 항목이 굳이 필요할까요? 라고 질문하셨는데, 이제 그 질문의 의미가 이해되는 것 같기도 하다... 어차피 서버와 통신하여 얻어 낸 response 객체 안에 accessToken이 있기 때문이다.
