[기타] 로컬스토리지와 쿠키
- 웹 서버와 클라이언트에서 모두 접근 가능함
- 따라서 웹 사이트 방문시 쿠키에 정보를 남기고 다음 방문에서 그 정보를 사용할 수 있음 -> 서버가 특정 사용자에 맞춘 페이지를 전달하도록 허용할 수 있음 -> 페이지에서 쿠키의 데이터를 이용하는 스크립트를 포함할 수 있음
- 각 쿠키는 키-밸류 쌍으로 된 lookup table(배열이나 연관 배열로 된 데이터 구조) -> String 형태
- 각 4KB까지 저장 가능, 최대 300개까지 저장할 수 있음
- 웹 페이지를 사용자에 맞게 바꾸는데 데이터를 사용할 수 있음
- 예) 세션 -> 세션을 비교하여 사용자를 변별하는 방식으로 새창에서 로그인을 유지할 수 있음
-
세션관리 서버에 저장해야 될 정보 관리
-
개인화(Personalization) 사용자 선호, 테마 세팅
-
트래킹(Tracking) 사용자 행동 기록 및 분석
- Session Cookie
- 한 세션(방문자가 웹 브라우저를 열어 서버에 접속하고 다시 웹 브라우저를 닫아 서버와의 연결을 종료하는 순간 까지의 한 단위) 동안 사용
- 생성: 사용자의 웹사이트 접속 시 생성됨
- 삭제: 사용자가 브라우저를 닫으면 세션이 종료되고 세션 쿠키는 영구적으로 삭제됨
- 임시 쿠키라고 불리는 세션 쿠키는 임시 메모리에 저장이 되며 브라우저나 탭이 열려있는 동안만 유효하며 만료일이 없음
- Persistent Cookie(Tracking Cookie)
- 사용자의 재방문에서 사용자를 기억하고 식별하는 데에 사용함
- 로그인 유지 및 사용자 인증을 처리
- 개인 데이터 노출 가능성이 있음
- Secure Cookie
- 웹브라우저와 웹서버가 HTTPS로 통신할 경우에만 웹브라우저가 쿠키로 전송함
- 항상 암호화하기 때문에 쿠키가 노출될 가능성이 줄어듦
- Third-Party cookie
- 접속한 사이트 도메인에서 발행되지 않은 쿠키
- 웹사이트의 한 세션에서 다른 세션으로, 관련 웹사이트 간에 정보를 전달하는 편리한 수단
- 서버 머신에 부담을 줄여줌
- 쿠키를 사용하지 않고 서버에 데이터를 저장하면 웹 사이트를 방문할때마다 로그인 없이는 사용자 정보를 검색하기 어려움
- 지속 시간을 설정할 수 있음
- 서버에서 응답에 Set-Cookie 헤더를 함께 전송
Set-Cookie: <cookie-name>=<cookie-value>
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[page content]
- 브라우저는 이후 모든 Request에서 Cookie HTTP 헤더 안에 쿠키를 포함하여 전송함
- 이전에 저장했던 모든 쿠키들을 회신함
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
- 단점:
- 쿠키가 많아지면 네트워크 부하가 커질 수 있음
- 한번에 하나의 정보만 저장할 수 있음
- 브라우저끼리 호환이 안됨(따로 저장해야 함)
-
로그인한 경우
-
로그인안한 경우
- localStorage는 JavaScript 및 HTML5를 통해서만 액세스
- 즉, 클라이언트에서만 접근 가능함
- 키/값 쌍을 저장할 수 있으며 만료 날짜 없이 데이터를 저장
- 사용자가 삭제할 수 있음
- 애플리케이션에서 클라이언트에서 필요로 하는 데이터의 경우에 적합
- 쿠키는 서버에서도 접근할 수 있으나 로컬 스토리지는 클라이언트에서만 읽을 수 있음
- 더욱 영구적인 솔루션 -> 오랫동안 저장해야하는 큰 데이터에 적합
- 인터넷 연결이 잘 유지되지 않는 경우에 데이터 보호에 유용하게 사용할 수 있음
- 쿠키보다 큰 스토리지 용량 제공 - 5MB
- 쿠키와 마찬가지로 서버 부담을 줄여줌
- Object도 JSON 문자열로 바꾸어 저장할 수 있음
참고자료