sessionstorage와 localstorage 속성에 대해 알아봅시다.

사실 간단한 테스트도 안 해 보고 무작정 이렇게 하면 되겠다고 생각했다가 뚝배기 깨진 적이 몇 번 있었습니다. localStorage하고 sessionStorage도 그 중 하나이니, 간단하게 기록해 두려고 합니다.

먼저 localStorage의 속성에 대해 간단하게 알아보겠습니다.

티스토리의 스토리에 접속해 봅시다. 다음에, 로컬 저장소 탭을 열어보면, 출처가 티스토리 닷컴이라고 되어 있는데요. 여기에, 키 값이 "local"이고, 값이 "test"인 데이터를 저장해 보겠습니다.

이제 새로운 탭을 열어서, 다른 티스토리 닷컴으로 이동해 봅시다. 그러면 로컬 저장소에 키가 "local"이고 값이 "test"인 것이 잘 들어가 있음을 볼 수 있습니다.

이것을 꺼내오기 위해, localStorage의 getItem 함수를 이용할 수도 있습니다. "test" 라는 값을 잘 리턴함을 알 수 있어요.

파이어 폭스를 모두 닫았다가 다시 켜도 로컬 저장소에 저장되어 있는 값은 유지됨을 알 수 있습니다.

이제, 네이버로 접속해 보겠습니다. 그랬더니, 키가 "local"인 것이 온데간데 없이 사라져 있음을 알 수 있습니다. 사라진 건 아니고, 다른 출처이기 때문에 보이지 않습니다. 이는 mdn의 localStorage 문서에서도 언급하고 있는 내용입니다. 그리고, naver와 tistory는 문서에 따르면, 다른 호스트 이름을 가지고 있으므로, 다른 출처입니다.

어찌 되었던 localStorage는 브라우저를 다시 닫고 열어도, 유지가 된다는 특성이 있습니다.