브라우저 저장소의 기능을 담당. 즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널.
서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다. 따라서 서버는 클라이언트가 누구인지 계속 인증을 해줘야 한다. 하지만 그것은 매우 귀찮고 번거로운 일이다. 또한 웹 페이지의 로딩을 느리게 만드는 요인이 되기도 한다. 그런 번거로움을 해결하기 위해 쿠키, 세션스토리지, 로컬 스토리지를 사용한다.
공통 사항 : 스토리지는 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다. 두 스토리지 모두 html5 에서 새로운 저장 옵션으로 도입이 된 개념이다. key - value 페어 객체 형태로 데이터가 저장된다.
Storage : 쿠키의 단점을 보완해서 만든 기술이다, 쿠키보다 보안이 우수하며 용량이 크다 .
Local Storage : 사용자가 지우지 않는 이상 데이터의 영구성이 보장된다. 사용자가 지우지 않는 이상 계속 클라이언트 웹브라우저에 남아있다. storage 3가지 중 허용 용량이 가장 크다(10mb).지속적으로 필요한 정보를 저장하기에 좋다.
Session Storage : 윈도우나 브라우저 탭을 닫을 경우 사라진다. 즉 데이터의 영구성을 보장하지 않는다. 일회성의 데이터
Cookie : 스토리지 개념 도입 이전 저장소로 사용이 되던 것 4kb까지만 저장이 가능하다. 지속 시간을 설정할 수 있다(만료 기간 설정 가능). 직접적이지 않는 데이터를 저장할 때 사용된다. 쿠키는 사이트에서 방문한 페이지를 저장하거나 유저 로그인 정보를 저장하는 등, 다양한 방법으로 사용이 되지만 문자열만 저장할 수 있다는 제한이 있다.
Local Storage : ex) 자동 로그인 정보 / 장바구니
Session Storage : ex) 일회성 로그인 / 잠깐 동안 필요한 정보
Cookie : ex) 3일간 다시 보지 않음 팝업 창
예전에는 토큰을 저장할 곳이 쿠키 밖에 없었지만, 지금은 LocalStorage에도 저장하는 일이 많아졌다. 하지만, LocalStorage는 말 그대로 데이터가 다 남아있으니 보안상 취약해지기 쉽기 때문에 프로젝트 성향에 맞춰 저장 장소는 그때그때 달라져야 한다.
setItem 메서드를 이용해 key값과 value값을 지정해주고
getItem 메서드를 이용해 key값을 호출 할 수 있다.
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
setcookie("key", "value", "지속시간 (초단위)")
데이터 호출
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie
기타 메소드
외에도 removeItem, clear 등등의 공통 메소드 존재