[Web Storage] Session Storage vs Local Storage

웹 브라우저에서 데이터를 저장하는 방법은 여러가지가 있다.

cookie, indexedDB, Local Storage, Session Storage 등등..

 

cookie는 가장 흔히 사용하는 데이터 저장 방식이긴하나, http 요청 시 항상 request의 Header에 Cookie로 담겨서 전송되게 된다. 이는 보안상 아주 취약한 문제가 될 수 있으며, 중요한 정보를 쿠키에 저장하는 방식은 권장되지 않는다.

이에 대응할 수 있는 Storage는Local Storage와 Session Storage가 있다.

 

Local Storage

local Storage의 정의를 MDN에서 살펴보면 다음과 같다.

 

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

Window.localStorage - Web API | MDN

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.) localStorage에 저장한 자료는 페이지 프로토콜별로 구분합니다. 특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 localStorage에 저장됩니다. 키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.

 

 

 

""

즉, 세션의 종료유무와 상관없이 Local Storage는 javascript를 이용 또는, 사용자가 직접 개발자 도구를 이용해 지우기 전 까지는 삭제되지 않고 유지가 된다는 것이다.

특징으로는 쿠키와 같이 도메인별로 저장이 되어 관리가 된다.

 

""

 

 

Session Storage

local Storage의 정의를 MDN에서 살펴보면 다음과 같다.

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

Window.sessionStorage - Web API | MDN

 

sessionStorage 읽기 전용 속성은 현재 출처 세션의 Storage 객체에 접근합니다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날 때 제거되는 차이가 있습니다. 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다. 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.

같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성합니다.

탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화합니다.

sessionStorage에 저장한 자료는 페이지 프로토콜별로 구분합니다. 특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 sessionStorage에 저장됩니다.

""

즉, 세션의 종료가 이루어지면 해당 Session에 대한 Session Storage가 모두 초기화가 된다.

LocalStorage와 다른 점은, 다른 탭이나 새 창의 Same Domain 환경에서도 모두 다른 Session을 갖고 있으므로 Storage가 공유가 되지 않아 모두 개별의 값을 유지, 보유하게 된다.

특징으로는 쿠키와 같이 도메인별로 저장이 되어 관리가 된다.

 

""

 

 

Local Storage와 Session Storage의 사용법

 

두 Storage 모두 같은 메소드와 사용 방법을 가지고 있다.

window.localStorage.setItem('key', 'value')
window.localStorage.getItem('key')
window.localStorage.removeItem('key')

window.sessionStorage.setItem('key', 'value')
window.sessionStorage.getItem('key')
window.sessionStorage.removeItem('key')

 

두 Storage 객체 모두

1. setItem으로 key값에 value를 저장

2. getItem으로 key값의 value 획득

3. removeItem으로 특정 key 제거

 

이 때, value는 항상 string 형태로 저장이 되므로 Object의 경우

JSON.stringify method를 이용해 JSON string형식으로 변환 시켜 setItem을 해주고,

getItem 이후 JSON.parse method를 이용해 다시 Object 형식으로 변환하여 사용해야 한다.

 

 

 

정리

localStorage와 sessionStorage는 모두 서버에 전송이 되지 않는 쿠키보다는 보안적으로 안전한 저장 매체이다.

각 사용 용도에 따라 예를 들어 로그인 된 계정별로 다른 값을 저장해야 하는 경우에는 sessionStorage,

비로그인상태와 로그인상태의 장바구니 상태를 동기화시키기 위해 사용할 경우에는 localStorage

등등 각 상황에 맞게 사용하면 된다.

 

하지만, 서버에 전송되지 않는다고해서 항상 안전한 매체는 아니다.

XSS 공격이 가능한 경우 javascript 조작을 통해 공격자의 서버로 해당 값을 전송시킬 수도 있기 때문에,

API Key 등 중요한 정보 역시 storage에 저장하는 방식은 권하지 않는다.