브라우저 저장소

브라우저 저장소

쿠키, 웹 스토리지, 로컬 스토리지, 세션 스토리지

HTTP통신을 통해서 클라이언트가 서버에게 requeset를 보내고 서버는 클라이언트에게 requeset에 대한 response를 보내고 접속을 종료한다.

 

통신이 끝나면 상태 인증에 쓰이는 상태 정보를 유지하지 않는다는 특징이 있다.
서버측에선 자원 낭비를 하지 않는 장점이 있지만, 통신을 할 때마다 새로 연결해줘야 하기 때문에 클라이언트는 그 때마다 인증을 해줘야하는 단점을 갖고있다.

 

이러한 문제에 사용하는 것이 브라우저의 스토리지이다.

브라우저의 저장공간인데, 쿠키, 웹 스토리지(로컬 스토리지, 세션 스토리지)가 있다. 웹 스토리지는 html5부터 제공되는 저장소이다. 쿠키와 웹 스토리지는 모두 해당 도메인에 대한 데이터를 브라우저에 저장한다.

---

[쿠키]
쿠키는 서버가 클라이언트에게 전송하는 작은 데이터 파일이다.
이름, 값, 도메인정보, 경로 정보, 만료 일자와 시간 등이 있다.
모든 브라우저에 전송이 되지만, 매번 서버에 전송이 되고 저장 용량이 작다.
또 하나 보안에 취약하다는 단점이 있다.

 

[웹 스토리지]
HTML5부터는 쿠키의 단점을 보완한 웹 스토리지를 사용한다.
쿠키와 기능은 유사하지만, 클라이언트에 저장만 할 뿐 서버로 전송하지 않는다.
키와 벨류의 값의 형태로 데이터를 저장한다.

로컬 스토리지: 브라우저 자체에 반 영구적으로 저장하고 브라우저를 종료해도 해당 데이터가 유지된다.
세션 스토리지: 탭 윈도우 단위로 생성이되고 탭을 닫을 때 데이터가 삭제된다.

*로컬 스토리지 사용방법: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

*세션 스토리지 사용방법: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

참고 블로그

[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등)

 

[어떤 유형의 데이터를 어디에 저장할까?]
로컬 스토리지: 자동 로그인
세션 스토리지: 입력 폼, 비로그인 장바구니 기능
쿠키: 다시보지않기 팝업 창