공통
- 데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장 할 때 사용하는 것
- 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다.
- 대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다.
- 글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다. (form)
- 쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장 할 때 사용한다.
- 방문자의 이동 경로를 저장하였다가 이동 시에 사용한다.
- 그 외 서버에 저장할 필요가 없는 정보들을 저장 할 때 사용한다.
- 가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다.
Cookie
- 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일.
- document.cookie하면 현재 쿠키 정보가 나옴.
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지됨.
- 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조.
- 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠키값은 4KB까지 저장.
- Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
- 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송
Session/Local Storage
로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소.
간단한 키와 값을 저장할 수 있습니다. 키-밸류 스토리지의 형태
SessionStorage
- storage의 특징 문자열 데이터만 저장할수 있다.
- 세션 스토리지는 브라우저 창을 닫는 순간 영구적으로 데이터 삭제
- 서버에 불필요한 데이터를 저장해달라고 요청하지 않아도 된다.
- 용량이 크다 (5MB, 브라우저마다 차이 있음)
- HTML5를 지원하지 않는 브라우저의 경우 사용 불가
비교
-
쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생.
1-1) 웹스토리지 : 로컬스토리지, 세션스토리지.
1-2) 웹스토리지는 Key와 Value 형태로 이루어짐.
1-3) 웹스토리지는 클라이언트에 대한 정보를 저장.
1-4) 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장.
-
로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장 ex) 자동 로그인 저장
-
세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제 ex) 입력 폼 정보 저장
3-1) 로컬&세션스토리지
장점1 : 서버에 불필요하게 데이터를 저장하지 않는다.3-2) 로컬&세션스토리지
장점2 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)3-3) 로컬&세션스토리지 단점 : HTML5를 지원하지 않는 브라우저의 경우 사용 불가
-
쿠키는 만료 기한이 있는 Key, Value 형태의 저장소
4-1) 쿠키 장점 : 대부분의 브라우저가 지원
4-2) 쿠키 단점1 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.
4-3) 쿠키 단점2 : 쿠키의 용량이 작음 (약 4Kb)
4-4) 쿠키 단점3 : 암호화 존재 x -> 사용자 정보 도난 위험
쿠키,세션,로컬 스토리지
1. 참고 출처: https://triplexlab.tistory.com/114 [트리플엑스랩 | TriplexLab:티스토리]
2. https://okayoon.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BF%A0%ED%82%A4Cookie-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80Session-Storage-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80Local-Storage
