[브라우저] 로컬스토리지, 세션 스토리지 , 캐시

로컬스토리지, 세션 스토리지 , 캐시

 

 

 

로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)는 HTML5에서 추가된 저장소이다. 

 

간단한 키와 값을 저장할 수 있다.(  키 : 밸류 )

 

이 둘의 차이점은 데이터의 영구성이다.

 

로컬 스토리지 : 사용자가 지우지 않는 이상 계속 브라우저에 남아있다.(단, 캐시삭제하면 제거된다.)

세션 스토리지 : 윈도우나 브라우저 탭을 닫을 경우 제거된다.

*단, 비밀번호 같은 중요한 정보는 저장하면 안된다. 클라이언트에 저장하는 것이기 때문에 털릴 가능성 100%

쿠키 : 만료 기한이 있는 키-값 저장소이다. 4kb 용량 제한이 있고, 매 서버 요청마다 서버로 쿠키가 같이 전송된다.

 

두 스토리지는 모두 window 객체()안에 들어있다. 스토리지 객체를 상속받기 때문에 메소드가 공통적으로 존재한다. 도메인 별 용량 제한도 있다.(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유) 모바일은 2.5mb/데스크탑은 5~10mb이다.

 

 

---

 

로컬 스토리지 : window.localStorage에 위치한다.

키-밸류. 모두 문자열로 변환된다.

localStorage.setItem('name', 'ara');
localStorage.setItem('birth', 1990);
localStorage.getItem('name'); // ara
localStorage.getItem('birth'); // 1990 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

localStorage.setItem( 키, 값 )으로 로컬 스토리지에 저장한 후,

localStorage.getItem( 키 )로 조회한다.

localStorage.removeItem( 키 )하면 해당 키가 지워지고,

localStorage.clear( )하면 스토리지 전체가 비워진다.

 

 

	//로컬아이디 설정
	var local_id;
	if(typeof(Storage) !== "undefined") {    // 스토리지가 있다면
		local_id = localStorage.getItem('daishin_id');//로컬스토리지아이디
	}else{  // 스토리지가 없다면
		local_id = getCookie('daishin_id'); //쿠키
	}
	if(local_id == null){
		local_id =  Math.random().toString(36).substr(2, 16); //임의로 ID생성
		if(typeof(Storage) !== "undefined") {
			localStorage.setItem("daishin_id",local_id); //스토리지
		}else{
			setCookie('daishin_id', local_id, 7); //쿠키
		}		
	}

 

 

 

---

 

세션 스토리지 : window.sessionStorage에 위치한다.

데이터가 영구적으로 보관되지 않는다. 페이지 세션이 종료되면 바로 지워진다.

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 :

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage