[JavaScript] 자바스크립트 Localstorage, Sessionstorage 사용법

Localstorage와 Sessionstorage

기능 구현을 하다 보면 데이터를 불러오는 방식에 대해서 고민이 될 때가 있다.

 

서버에 저장시켜서 불러오는 방식으로 데이터를 불러오기에는 과투자라고 생각되거나, 굳이 서버에 저장할 필요는 없지만 어딘가에는 저장되어야 하는 기능이 필요할 때가 있다.

 

ex) 아이디 기억하기, 장바구니, 최근 본상품, 다음부터 이창을 띄우지 않음 등등..

 

이럴 때 웹스토리지를 사용하면 간편하게 데이터를 저장하고 사용할 수 있다. (필요에 따라 쿠키를 사용해도 무방하다.)

주의할 점은 패스워드나 주민번호같이 보안이 중요한 데이터는 노출의 위험이 있으므로 서버에 저장하는 것이 바람직하다.

 

???: 로컬 스토리지랑 세션 스토리지랑 뭐가 다름?

 

사용하면서 느낀 가장 큰 차이점은 로컬 스토리지는 사용자가 삭제하지 않는 한 반영구적으로 보관되지만

(브라우저 종료 시 에도 삭제되지 않음)

세션 스토리지는 브라우저가 종료되면 사라진다. 정확히 말하자면 세션이 끊기기 전에는 유지되고 세션이 끊기면 사라진다.

나머지 차이점은 크게 느껴본 적이 없어서 자세히 알아보고 싶다면 검색을 추천한다.

 

이제 빠르게 사용법으로 넘어가겠다. 로컬 스토리지나 세션 스토리지나 사용방법은 동일하다.

// 로컬스토리지에서 값을 가져올때
localStorage.getItem('저장할때 지정한 이름');
sessionStorage.getItem('저장할때 지정한 이름');

// 로컬스토리지에 값을 저장할때
// 왼쪽에 저장할 이름을 정하고 오른쪽에 넣을 값을 적어준다.
localStorage.setItem('저장할 이름',value);
sessionStorage.setItem('저장할 이름',value);

// 로컬스토리지에서 값을 삭제할때
localStorage.removeItem('저장할때 지정한 이름');
sessionStorage.removeItem('저장할때 지정한 이름');

// 로컬스토리지안에 값 전체를 삭제하고 싶을때
localStorage.clear();
sessionStorage.clear();

 

밑에 로컬스토로지를 사용한 예제를 첨부하며 글을 마무리한다.

[Angular] 자바스크립트 로그인 아이디 기억하기