[JavaScript] localStorage와 sessionStorage

JSP와 Controller 간의 값 전달은 session이나 model 객체에 바인딩 하는 방식으로 많이 사용한다

JSP와 JSP 간의 값 전달은 sessionStorage나 localStorage를 이용할 수 있다

 

로컬스토리지와 세션스토리지는 HTML5에서 추가된 저장소 개념이다. 키-밸류의 형태로 저장할 수 있다.

둘의 차이점은 '데이터의 영구성' 인데,

로컬스토리지의 데이터는 임의로 지우지 않는 이상 계속해서 브라우저에 남아있다.

하지만 세션스토리지의 데이터는 브라우저를 닫을 경우 제거된다.

 

지속적으로 필요한 정보 -> 로컬 스토리지

일시적으로 필요한 정보 -> 세션 스토리지

보안이 필요한 정보들은 절대 저장하면 안된다! 클라이언트에 저장하기 때문에 보안이 취약하다.

비슷한 맥락으로 이래서 브라우저 인증서를 발급받지 말라는건가 싶다.

 

<사용방법>

값을 보낼 때 : sessionStorage.setItem("key", value);

값을 가져올 때 : sessionStorage.getItem("key");

해당 값을 지울 때 : sessionStorage.removeItem("key");

스토리지 전체를 비울 때 : sessionStorage.clear();

 

세션스토리지, 로컬스토리지 둘 다 윈도우 객체에 위치하기 때문에 메소드가 같다.

 

따로 객체를 선언할 필요도, 컨트롤러단과 통신할 필요도 없어서 매우 편리하다

하지만 사용하고자 하는 액션이 끝난 후 스토리지를 비워주지 않으면 값이 계속 남아있어

다른 페이지를 침범할 때도 있고, 원하는 결과값이 제대로 나오지 않을 수가 있다

그러니 항상 액션이 끝난 시점에 스토리지를 비워주거나, 

스토리지에 set해주는 이름을 알아볼 수 있게 유니크하게 지어야 한다

EX)관리자페이지에서 쓰는 시퀀스 넘버 -> 'adminSeq'

 

아 그리고, 만약에 HTML로 모달창을 붙일 경우

HTML도 초기화 해줘야한다!

HTML.remove();