[기술면접] LocalStorage와 SessionStorage의 차이

LocalStorage와 SessionStorage의 차이

애매한 카테고리 분류로 기술면접에 들어온 로컬 스토리지와 세션 스토리지에 대한 정리를 시작해보자.

프론트든, 백이든 필히 질문가능한 개념이다. 바로 내가 받았던 질문이었기 때문이다.

 

"혹시 LocalStorage와 SessionStorage의 차이를 아시나요?"

 

먼저, 차이를 알고자한다면 이들의 공통점이 있다는 얘기이다.

LocalStorage(로컬 스토리지)와 SessionStorage(세션 스토리지)의 공통점은 웹 브라우저에 데이터를 저장하는데 사용하는 객체이다.

이 둘의 차이점은 LocalStorage(persistent)와 SessionStorage(temporary) 이다.

 

LocalStorage(로컬 스토리지)은 사용자 데이터 유지 가능하고, 탭 공유도 가능 !

출처: https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools

정의

- LocalStorage는 웹 브라우저에 데이터를 저장하는 사용하는 객체

- 각 데이터 항목은 키(key)와 값(value)의 쌍으로 구성되어있음.

 

특징

1. 사용자 세션 데이터 유지 가능.

2. 브라우저를 닫았다가 다시 열었을 때도 지속됨.

3. 탭을 여러 개 열어도 공유됨.

4. 명시적으로 삭제될 때까지 지속됨.

5. 변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용가능.

 

요약: 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않는다.

일, 주, 월, 및 연도에 사용할 수 있는 만료 날짜없이 사용자 정보 데이터를 저장한다.

// key와 value 형태로 localStorage에 저장된다.
localStorage.setItem('name', 'suzy');

// key를 통해 매핑되어있는 값을 찾을 수 있다.
localStorage.getItem('name');

// localStorage 객체에서 'name'이라는 키(key)에 해당하는 값을 삭제
// 키와 해당하는 값(value)를 모두 삭제한다. 
localStorage.removeItem('name');

// localStorage를 다 삭제한다. 
localStorage.clear();

그래서 언제 쓰일 수 있는데? 예를 들면, 다크모드를 설정 후, 재방문 시 이전 모드가 자동으로 설정되도록 localStorage에 저장!

 

SessionStorage(세션 스토리지)은 세션 끝나면 데이터 날라감! 즉, 탭이 닫히면 저장된 데이터 삭제됨!

출처: https://developer.chrome.com/docs/devtools/storage/sessionstorage/

정의

- SessionStorage는 웹 브라우저의 세션(session) 기간 동안 데이터를 저장하는데 사용하는 객체

- 각 데이터 항목은 키(key)와 값(value)의 쌍으로 구성되어있음.

 

특징

1. 브라우저 세션 기간동안만 사용할 수 있으며 탭이나 창을 닫을 때 삭제됨.

2. 새로고침을 해도 유지됨.

3. 변경된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용가능함.

4. 탭이 닫히면 저장된 데이터가 삭제됨.

 

요약: sessionStorage 객체는 localStorage와 비슷한 방식으로 작동하지만, 저장된 데이터가 세션 기간 동안에만 유지되며 브라우저를 닫으면 데이터가 삭제된다. 새로고침 자체가 세션이 바뀌는 것이 아니기에 데이터가 유지된다. 

// key와 value 형태로 sessionStorage에 저장된다.
sessionStorage.setItem('name', 'suzy');

// key를 통해 매핑되어있는 값을 찾을 수 있다.
sessionStorage.getItem('name');

// sessionStorage 객체에서 'name'이라는 키(key)에 해당하는 값을 삭제
// 키와 해당하는 값(value)를 모두 삭제한다. 
sessionStorage.removeItem('name');

// sessionStorage를 다 삭제한다. 
sessionStorage.clear();

 

 

결론

[About LocalStorage & SessionStorage]

공통점 : 웹 브라우저에 데이터를 저장하는 객체

차이점 : Local(persistent) and Session(temporary) storage respectively.