브라우저의 sessionStorage와 localStorage

오늘은 브라우저에서 session과 local에 대해 알아보려고 합니다.

먼저 두개 모두 브라우저에서 데이터를 클라이언트에 저장을 한다는점이 동일합니다. 하지만 

저장되는 데이터의 지속성과 수명에서 차이가 있습니다.

 

1. localStorage:

저장 위치: 브라우저의 로컬 저장소에 데이터가 저장됩니다. 데이터 생명주기: 데이터는 명시적으로 삭제될 때까지 브라우저에 영구적으로 저장됩니다. 페이지를 새로고침하거나 브라우저를 닫고 다시 열어도 데이터가 유지됩니다.

사용자가 브라우저를 닫고 다시 열어도 데이터를 계속 사용할 필요가 있을 때 유용합니다. 예를 들어, 로그인 상태 유지, 설정값 저장 등에 사용할 수 있습니다. 저장 용량: 각 도메인당 약 5MB 정도의 저장 용량을 제공합니다.

 

localStorage 사용법:

// 데이터 저장
localStorage.setItem('username', 'JohnDoe');

// 데이터 읽기
const username = localStorage.getItem('username');
console.log(username); // JohnDoe

// 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();

 

2.sessionStorage:

저장 위치: 브라우저의 세션 저장소에 데이터가 저장됩니다. 데이터 생명주기: 데이터는 현재 세션 동안만 유지됩니다. 브라우저 탭이나 창을 닫으면 저장된 데이터가 사라집니다. 페이지를 새로고침해도 데이터는 유지되지만, 탭이나 창을 종료하면 데이터가 삭제됩니다.

세션 동안만 필요한 데이터를 저장할 때 사용합니다. 예를 들어, 한 번의 브라우저 세션 동안만 필요한 데이터나, 페이지 간에 임시로 데이터를 전달할 때 유용합니다. 예를 들어, 사용자가 로그인한 후 한 번의 세션 동안만 사용되는 데이터를 저장할 때 적합합니다. 저장 용량: localStorage와 마찬가지로 5MB 정도의 저장 용량을 제공합니다.

 

sessionStorage 사용법:

// 데이터 저장
sessionStorage.setItem('sessionID', '123456');

// 데이터 읽기
const sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // 123456

// 데이터 삭제
sessionStorage.removeItem('sessionID');

// 모든 데이터 삭제
sessionStorage.clear();

 

두개의 세션을 확인하는 방법 개발자 도구의 Application에 들어가면 Session Storage와 Local Storage가 있습니다. 

해당 Storage들을 클릭하면 본인이 설정한 정보를 확인할 수 있어요.

 

 

결론:

localStorage는 장기적인 데이터 저장이 필요할때 사용되게 됩니다. 예를들어 로그인 유저를 기억하거나 설정을 유지할때 사용합니다.

sessionStorage는 현재 세션 내에서만 필요한 데이터를 저장하고, 페이지를 새로고침하거나 탭을 닫으면 삭제되는 데이터를 관리할 때 유용합니다.

 

속성	localStorage	sessionStorage
데이터 유지기간	브라우저가 닫히기 전까지 영구 저장	브라우저 탭을 닫을때까지 유지
세션 간 공유	브라우저의 모든 탭에서 공유	동일한 탭 내에서만 공유
데이터 삭제	명시적으로 삭제하지 않으면 삭제되지 않는다.	탭이나 창을 닫으면 자동으로 삭제한다.
용도	장기적인 설정, 로그인 상태 유지 등등	임시 세션 데이터, 페이지 간 데이터 전달