localStorage / sessionStorage

localStorage / sessionStorage

이번 기업과제는 로컬스토리지에 값을 저장해야 한다는 조건이 붙어 있어 store 라이브러리를 사용하려고 하는데, 기왕이면 로컬 스토리지에 관해 알고 사용하면 더 좋지 않을까? 싶어 정리를 해 본다

찾아보던 중에 세션 스토리지도 있길래 같이 적으려구

localStorage

로컬 스토리지는 말그대로 로컬에 저장되며, 브라우저를 종료해도 값이 살아있다

또한 같은 페이지 프로토콜 (같은 웹 페이지 주소) 는 탭이나 창이 달라도 같은 로컬 스토리지를 공유하므로, 다른 창을 열었다고 해서 다른 값이 나오지 않는다

이러한 특성 때문에 사용자가 고의로 지워버리지 않는 이상 데이터는 계속 유지된다

브라우저별로 서로 다른 로컬 스토리지 영역을 가지므로, 크롬에서 저장한 데이터를 사파리에서 열람한다던가... 같은 행동은 불가능하다

sessionStorage

세션 스토리지는 로컬에 저장되긴 하지만 로컬 스토리지와 다르게 세션별로 저장되므로, 각 탭 / 창이 같은 주소를 가리키고 있더라도 서로 다른 값을 가진다

브라우저를 종료하거나 해당 세션 (창 및 탭) 을 종료하면 날아간다

공통점

메서드

localStorage.setItem('key1', 'value1');
sessionStorage.setItem('key1', 'value1');

const localTmp = localStorage.getItem('key1');
const sessionTmp = sessionStorage.getItem('key1');

localStorage.removeItem('key1');
sessionStorage.removeItem('key1');

localStorage.clear();
sessionStorage.clear();

같은 동작을 수행하는 메서드의 생김새가 완전히 똑같다

데이터 형식

데이터는 key, value 한 쌍으로 저장 및 사용된다

또한 value는 무조건 문자열로 저장되므로, 다른 자료형의 값을 사용할 때 주의가 필요하다

예를 들어 객체 형식의 데이터를 저장하고자 한다면, 바로 value로 넣으면 안 되고 JSON.stringify 등의 메서드를 사용하여 문자열로 바꿔 주어야 한다

차이점

보존성

• 로컬 스토리지는 브라우저를 끄거나 창, 탭을 날려도 데이터가 저장된다
• 세션 스토리지는 브라우저를 끄거나 창, 탭을 날리면 데이터가 날아간다

저장 범위

• 로컬 스토리지는 같은 url이라면 (같은 페이지 프로토콜이라면) 다른 창 / 다른 탭을 열어도 값이 공유된다
• 세션 스토리지는 같은 url이라도 다른 창 / 탭에서 다른 데이터를 갖는다

참고 자료

Window.localStorage - Web API | MDN

Window.sessionStorage - Web API | MDN