localStorage와 sessionStorage 차이점 (간단한 비교)

localStorage와 sessionStorage는 웹 브라우저에 데이터를 저장할 수 있다.

크롬 브라우저의 개발자 도구 (애플리케이션 화면)

위 사진은 크롬 브라우저의 개발자 도구의 화면이다. 애플리케이션 탭을 클릭하게 되면 localStorage(로컬 스토리지) sessionStorage(세션 스토리지)를 확인할 수 있다. 물론 데이터 삭제도 가능하다. 추가는 잘 모르겠다... (가능하면 알려주세요)

 

페이지를 새로 고침 하거나 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다. 물론 localStorage와 sessionStorage 둘 다 그렇다는 건 아니다. 여기서 상황에 맞게 사용해야 한다.

 

가장 큰 차이점은 브라우저를 다시 실행했을 때 데이터가 남아있냐 없냐 차이다.

 

브라우저를 다시 실행하면 localStorage는 데이터가 남아있고 sessionStorage는 데이터가 사라진다.

 

둘 다 사용법은 비슷하다.

 

localStorage

localStorage.setItem('이름', '저장할 데이터'); // 저장할 키(이름), 데이터

localStorage.getItem('이름'); // 사용할 데이터의 키(이름)

localStorage.removeItem('이름'); // 삭제할 데이터의 키(이름)

localStorage.clear(); // localStorage 데이터 전체 삭제

sessionStorage

sessionStorage.setItem('이름', '저장할 데이터'); // 저장할 키(이름), 데이터

sessionStorage.getItem('이름'); // 사용할 데이터의 키(이름)

sessionStorage.removeItem('이름'); // 삭제할 데이터의 키(이름)

sessionStorage.clear(); // sessionStorage 데이터 전체 삭제

 

쉽게 생각하면 상황에 맞게 데이터를 반영구적으로 저장할 것인지 아닌지에 따라 둘 중 한 가지를 사용하면 될 것 같다.