JavaScript~localStorage와 sessionStorage의 차이

들어가기에 앞서

localStorage sessionStoreage는 자바스크립트의 web Storage API의 일종입니다. 둘 다 클라이언트 사이드에서 데이터를 저장하는데 사용하는 기능입니다만, 둘 사이엔 몇가지의 차이점이 있습니다. 이번 포스팅에선 localStorage sessionStoreage의 사용 예와, 둘의 차이점에 대해 정리해 보도록 하겠습니다.

localStorage란?

앞서 서술했듯이 클라이언트 사이드, 즉 유저의 브라우저에 데이터를 일시 저장, 호출 하는 Web Storage API입니다. 브라우저를 닫은 후 다시 열어도 데이터가 보존되어있는 영구 저장소입니다. 저장되는 데이터는 'key'와 'value'로 구성되어 있습니다. 저장되는 데이터의 형태는 String(문자열)형태이므로 number형이나 object형 같은 다른 형태의 데이터를 저장하고자 할 땐, String으로 형변화를 할 필요가 있습니다.

localStorage의 사용예

// localStorage에 데이터를 저장
localStorage.setItem('key', 'value'); //'key' = key값, 'value' = value값

// localStorage로 부터 데이터를 취득
var data = localStorage.getItem('key');
console.log(data);  // 출력: value

상기의 localStoreage.setItem으로 브라우저의 localStorage에 그 값이 저장됩니다.
localStorage.getItem은 key값으로 value의 값을 취득할 수 있는 메소드입니다.
상기의 코드처럼 콘솔에 출력하는 것으로 저장소의 값을 알 수 도 있지만, 브라우저에서 지원하는 개발자 툴로도 storage의 정보를 알 수도 있습니다.

특정한 key값을 가진 데이터를 삭제하는 경우 이하의 removeItem메소드를 이용합니다.

// localStorage로 부터 key값이 'key'인 데이터를 삭제
localStorage.removeItem('key');

개발자 툴로 데이터의 삭제를 확인해 봅시다.

또한 점 표기법(dot notation)으로도 값의 저장과 취득이 가능합니다.

// localStorage에 데이터를 저장
localStorage.newKey = 'newValue';

// localStorage로 부터 데이터를 취득
var data = localStorage.newKey;
console.log(data);  // 출력: newValue

마찬가지로 개발자 툴에서도 그 값을 확인 가능합니다.

데이터의 삭제는 이하의 코드로 실행합니다.

// localStorage로 부터 newKey의 데이터를 삭제
delete localStorage.newKey;

sessionStorage란?

localStorege와 동일하게, 클라이언트 사이드에 데이터를 저장하는 Web Storage API로, key와 value값이 짝을 지어 데이터를 저장합니다. 한 세션이 종료할 때(브라우저나 탭을 닫을 때)까지 데이터를 저장합니다. 세션이 종료되지 않는 이상 데이터가 유지가 되기 때문에 여러 페이지를 이동 할 때도 데이터는 유지됩니다.

sessionStorage의 사용예

// sessionStorage에 데이터를 저장
sessionStorage.setItem('key', 'value'); //'key' = key값, 'value' = value값

// sessionStorage로 부터 데이터를 취득
var data = sessionStorage.getItem('key');
console.log(data);  // 출력: value

기본적인 메소드 명과 사용법도 localStorage와 동일합니다.　마찬가지로 브라우저의 개발자 툴로 저장된 값을 확인 가능합니다.

데이터의 삭제도 동일한 removeItem를 사용합니다.

// sessionStorage로 부터 key값이 'key'인 데이터를 삭제
sessionStorage.removeItem('key');

점 표기법(dot notation)으로도 값의 저장과 취득이 가능합니다.

// sessionStorage 데이터를 저장
sessionStorage.newKey = 'newValue';

// sessionStorage 부터 데이터를 취득
var data = sessionStorage.newKey;
console.log(data);  // 출력: newValue

// sessionStorage 부터 newKey의 데이터를 삭제
delete sessionStorage.newKey;

마찬가지로 브라우저의 개발자 툴로 저장된 값을 확인 가능합니다.

localStorage와 sessionStorage의 차이

두 관점에서 크게 차이를 보입니다.
수명(Lifetime), 범위(Scope)입니다.

1. 수명(Lifetime)

   • localStorage: 브라우저를 닫은 다음에도 데이터는 유지가 되므로, 브라우저를 닫은 후 다시 열 때 그 데이터는 남아 있습니다. 유저나 웹어플리케이션이 데이터를 삭제하지 않는 이상 유지가 됩니다.
   • sessionStorage: 세션이 유지되는 동안 데이터가 유지됩니다. 즉 해당 세션의 브라우저 창이나 탭이 열려 있는 동안 유지가되며, 세션종료(창이나 탭을 닫음)를 하게 되면 저장된 데이터는 지워집니다.

2. 범위(Scope)

   • localStorage: 도메인에 따라 저장되며, 동일한 도메인에서 열린 복수의 창과 탭에서 데이터에 엑세스 가능합니다.
     

     

     

     

     
     동일한 도메인(labfor310.tistory.com)에는 동일한 저장 데이터가 확인 되지만, 다른 도메인(google.com)에서는 확인이 되지 않습니다.
     
     

   • sessionStorage: 도메인에 따라 저장되지만 데이터를 생성한 해당 세션(브라우저의 창이나 탭)으로 한정됩니다. 즉, 도메인이 동일해도 다른 창이나 탭에서는 데이터에 엑세스 할 수 없습니다.
     

     

     

     

     
     동일한 도메인(labfor310.tistory.com) 이더라도 동일한 세션이 아니므로 데이터가 확인 되지 않습니다.

   차이점	localStorage	sessionStorage
   수명	브라우저를 닫아도 유지. 삭제처리를 하지 않는 한 유지.	세션이 유지되는 동안 유지. 세션종료시 자동 삭제.
   범위	동일한 도메인이라면 엑세스 가능.	동일한 도메인이더라도, 동일 세션이 아닌경우 엑세스 불가.