[ WEB ] - sessionStorage? localStorage?

sessionStorage와 localStorage란?

localStorage와 sessionStorage는 브라우저에서 데이터를 키:값 쌍의 객체 형태로 저장할 수 있게 해주는 스토리지이다. 두 스토리지는 데이터 유지 기간과, 데이터가 공유되는 범위에 있어서 차이를 가진다.

sessionStorage에 저장된 데이터는 기본적으로 해당 세션이 유지되는 동안에만 유효한데, 이는 곧 브라우저가 열려 있는 경우에만 데이터가 유지됨을 의미한다. 기존 창에서 새로고침을 하는 것과 같은 경우에는 세션이 그대로 유지되지만 브라우저를 닫게 되면 기존의 데이터는 확인할 수 없다. 또한 기존 탭이 아닌 새로운 탭을 여는 경우에도 새로운 세션을 생성하기 때문에 이전의 다른 탭에 저장된 데이터의 내용은 공유되지 않는다. 즉 브라우저의 각 탭은 독립적으로 sessionStorage가 생성, 관리됨을 알 수 있다.  

반면 localStorage는 sessionStorage와 달리 해당 탭이 닫히더라도 데이터가 유지된다. 또한 localStorage의 경우 브라우저 세션 전역에 데이터를 저장하여, 각기 다른 탭에서 로컬스토리지에 저장한 데이터에 접근할 수 있다.

예를 들어 /login 페이지에서 각각 sessionStorage와 localStorage에  사용자 정보를 저장해둔 경우에, sessionStorage의 경우에는 새로운 탭에서 접근하여 sessionStorage 를 확인할 경우 아무런 데이터도 얻어낼 수 없다. 반면 localStorage의 경우 다른 탭에서 접근하더라도 이전 탭에서 저장해둔 정보가 그대로 남아있게 된다.

글쓰기와 같은 기능을 제공하는 화면의 경우 sessionStorage에 사용자가 입력하는 데이터를 저장해두는 경우 새로고침 시에도 기존의 데이터를 유지해주어 사용자 편의성을 높여줄 수 있다.

* 위 두 스토리지에서 데이터 접근 가능한 범위는 동일한 사이트 주소인 경우에만 가능하다. 예를 들어 mihee.com 이라는 사이트에서 데이터를 로컬스토리지나 세션 스토리지에 저장하더라도 이는 해당 사이트 내에서만 데이터가 유지되며, naver.com  사이트로 이동하게 되면 mihee.com에서 저장한 데이터는 확인할 수 없다.

사용법

1) 데이터 저장

sessionStorage.setItem([key], [value])

2) 데이터 접근

sessionStorage.getItem([key])

3) 데이터 제거

sessionStorage.removeItem([key])

 

 

 

출처

https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage