브라우저 저장소란?

브라우저 저장소 - LocalStorage, SessionStorage, Cookie

• Cookie와 Web Storage 모두 해당 도메인과 관련된 데이터를 클라이언트 웹 브라우저에 저장할 수 있도록 해준다.
• 둘 다 도메인 단위로 접근이 제한된다.
• 쿠키
  • 쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일 이다.
  • 만료기한이 있는 키/값 저장소
  • 4kb용량 제한
  • 웹사이트는 쿠키를 통해 접속자의 장치를 인식하고, 접속자의 설정과 과거 이용 내역에 대한 일부 데이터를 저장한다.
  • 세션쿠키 : 웹 브라우저가 활성화 되어 있는 기간 동안 저장된다. 웹 브라우저를 닫을 때 삭제된다.
  • 영구쿠키/지속적 쿠키 : 지정된 기간동안, 또는 수동으로 쿠키를 삭제할 때 까지 장치에 남아있는다.
• WebStorage
  • html5에서 추가된 저장소
  • 키/값의 형태로 데이터를 저장할 수 있다.
  • Local Stroage
    • 사용자가 지우지 않는 이상 영구적으로 보관이 가능하다.
    • 도메인이 같으면 전역적으로 공유가 가능
  • Session Strorage

    • 브라우저 탭을 닫으면 저장된 데이터가 제거된다.

    • 브라우저 컨텍스트가 다르면 데이터를 불러올 수 없다.

      : 브라우저 컨텍스트? Document를 표시하는 환경, 브라우저가 불러온 웹 페이지

웹 스토리지와 쿠키의 차이

쿠키

1. 매번 서버로 전송
2. 문자열만 저장 가능
3. 4kb의 용량 제한
4. 브라우저가 종료되어도 저장되어 있을 수 있음

세션

인증에 대한 정보를 서버가 저장

웹 서버가 세션아이디 파일을 만들어서 서비스가 돌아가고 있는 서버에 저장

때문에 쿠키보다 보안이 좋지만 사용자가 많아지면 메모리를 많이 차지 - 성능저하

브라우저가 종료되면 삭제

만료 시간/날짜를 정해서 지울 수 있다

토큰

인증에 대한 정보를 사용자가 저장

캐시

한번 전송받은 데이터를 저장해 놨다가 필요할 때 꺼내쓰기 가능

이미지, css, js파일을 브라우저나 서버에 저장하고 사용하는 것

한번 캐시에 저장되면 서버에서 변경되어도 사용자에게 표시되지 않을 수 있으므로 캐시를 지워주거나 서버에서 응답보낼때 header에 캐시 만료시간 명시해서 해결 가능

웹 스토리지

1. 데이터를 클라이언트에 저장만 할 뿐 서버로 전송되지는 않는다.- 네트워크 트래픽 비용 감소
2. 문자열 외에도 구조화된 객체를 저장할 수 있다.
3. 하나의 사이트에서 저장할 수 있는 용량에 제한이 없음 → 사실 제한이 있고(5~10mb) 브라우저별로 다르지만 키/값만 저장하는 것이기 때문에 제한없는거나 마찬가지

쿠키 & 웹스토리지

공통점

1. 해당 도메인과 관련된 데이터를 클라이언트의 웹브라우저에 저장
2. 사이트의 도메인단위로 접근 제한

차이점

1. 쿠키는 매번 서버로 전송/ 웹 스토리지는 클라이언트에 저장할 뿐 서버로 전송 안함
2. 문자열만 저장 가능/ 구조화된 객체 저장 가능
3. 용량제한있음(4kb)/ 용량제한 거의 없음
4. 만료일자가 존재/ 한번 저장하면 영구적으로 존재(로컬/세션스토리지 구분)