TIL3(저장소Storage)

웹 저장소

데이터를 저장을 할 때 서버 DB을 통해서 저장을 하는데,

굳이 서버에서 가지고 있지 않아도 되는 데이터들을 저장해야 할 때가 있을 겁니다.

별로 중요하지 않거나, 지워져도 되거나, 같은 말이지만 유실되도 되거나 등등

그럴때 사용 하는것이 웹 저장소입니다.

중요한 정보는 절대 저장하지 않는다!

1. Local Storage

• JavaScript 로 조작
• 도메인, 프로토콜, 포트로 묶여있기 때문에 같으면 같은 스토리지를 공유
• 브라우저가 달라도 도메인만 같다면 동일한 로컬 스토리지를 사용
• 서버에 전송하지 않음(쿠키보다 더 많은 자료를 보관 가능) 로컬 스토리지 5mb 쿠키 4kb
• 사용자가 지우지 않는 이상 브라우저에 계속 남아 있음
• 클라이언트 저장

자동로그인과 같이 지속적으로 필요한 데이터를 저장

2. Session Storage

로컬 스토리지와의 다른점은 데이터의 영구성입니다.

데이터가 윈도우나 브라우저 탭을 닫을 경우 제거됨,

3. 쿠키

• 사용자의 유효시간을 정할수 있음(브라우저가 종료되도 인증은 유지됨)
• 클라이언트의 상태 정보를 로컬에 저장했다가 참조
• 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음 하나당 4kb까지 저장

쿠키의 동작방식

• 클라이언트 페이지를 요청
• 서버에서 쿠키를 생성
• HTTP 헤더에 쿠키를 포함 시켜 응답
• 브라우저가 종료되도 쿠키 만료기간이 남아있다면 클라이언트에서 보관
• 같은 요청을 할 경우 HTTP 헤더에서 쿠키를 함께 꺼냄
• 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키를 항상들고 서버와 통신한다고 생각하면 편할듯 하다

쿠키 사용의 예

• 로그인시, 아이디와 비밀번호 저장 하시겠습니까?
• 쇼핑몰의 장바구니 등
• 팝업종료 더 이상 보지않음 등

쿠키는 만료 기한이 있는 키 - 값 저장소

서버는 요청 자체만으로 그 요청이 누가 보냈는지 알 수 없기 때문에 응답을 보낼 수가 없다.
하지만 쿠키에 내 정보가 담겨서 서버로 보내진다면 서버는 쿠키를 읽어 내가 누군지 알 수 있다.

4kb의 용량제한을 다 쓰게 된다면 항상 서버와 주고 받는데 어려움이 있다.

그래서 이 때 로컬 스토리지와 세션스토리지를 활용한다.

쿠키와 웹 스토리지

쿠키의 단점을 보완해 HTML5 에서 웹 스토리지가 탄생

쿠키의 단점

• 매 HTTP 요청마다 포함되어 api 호출로 서버에 부담
• 쿠키의 용량이 작음(4kb)
• 암호화가 존재하지 않아서 보안상 위험