Front/JavaScript

Web Storage(local, session)

밍꿔 2019. 11. 19. 18:10


반응형

 

* Web Storage

 

HTML5 에서 추가된 내용으로, 데이터를 클라이언트에 저장하는 저장소입니다.

키와 값을 저장(key-value Storage)할 수 있고, Web Storage를 상속받아 구현된 localStorage와 sessionStorage가 존재합니다.

 

1. LocalStorage

 - localStorage는 일부러 지우지 않는다면 브라우저를 닫고 열어도 계속 남아있음. (만료기간이 없음)

 - 도메인마다 별도로 로컬스토리지 생성

 - 접근 : window.localStorage

 - 사용 예 : 지속적으로 필요한 데이터(자동 로그인 등)

 

//로컬스토리지 저장
localStorage.loginId = value;
localStorage.setItem("key", value);


//특정 로컬스토리지 불러오기
localStorage.loginId;
localStorage.getItem("key");


//전체 로컬스토리지 데이터 불러오기
localStorage.getItem(); 


//특정 로컬스토리지 삭제
localStorage.removeItem("key");


//로컬스토리지 전체 삭제
localStorage.clear();

 

 

2. SessionStorage

 - sessionStorage는 페이지의 window가 바뀌거나 브라우저 탭을 닫을 때 사라짐. (세션이 만료될때 종료)

 - 브라우저가 다르면 서로 다른영역

 - 도메인마다 별도의 세션스토리지 생성

 - 접근 : window.sessionStorage

 - 사용 예 : 잠깐 동안 필요한 정보(일회성 로그인 정보)

 

//세션 저장
sessionStorage.setItem("key", value);


//특정 세션 값 불러오기
sessionStorage.getItem("key");


//특정세션 삭제
sessionStorage.removeItem("key");


//세션 전체 삭제
sessionStorage.clear();

 

 

* Java에서 SessionStorage

public String intro( HttpServletRequest req, HttpServletResponse res){

	//세션 생성
	req.getSession().setAttribute("key", value);

	//세션 값 반환
	req.getSession().getAttribute("key");
	
	//세션 값 반환 없으면 세션생성
	req.getSession();

	//세션 값 반환 없으면 null 반환
	req.getSession(true); 
}


public void filter(ServletRequest req, SercletResponse res){

	HttpSession session = request.getSession();
}


// 세션종료 모두삭제
session.invalidate(); 


// Key인 세션 제거
session.removeAttribute("key"); 


// 세션 속성의 이름들을 Enumeration 객체 타입으로 리턴
session.getAttributeNames();  

 

 

* 쿠키 vs Web Storage

- 쿠키 데이터는 서버로 전송되지만, Web Storage의 데이터는 전송 X

- 쿠키 데이터와 달리 Web Storage의 데이터는 반영구저장이 가능.

 

 

 

 

반응형