📚 쿠키
쿠키는 브라우저에 저장되는 문자열로, HTTP 프로토콜의 일부이다.
서버가 HTTP 응답 헤더에 Set-Cookie에 내용을 전달하면, 브라우저는 Cookie를 자체적으로 저장한다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달한다.
📌 쿠키 사용
쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰인다.
-
쿠키 설정
사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 '세션 식별자(session identifier)' 정보를 사용해 쿠키를 설정한다. -
식별 요청
사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP Cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)를 함께 실어 서버에 요청을 보낸다. -
사용자 식별
서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별한다.
💡 쿠키 읽기
document.cookie로 현재 사이트와 관련된 쿠키가 브라우저에 저장되어있는지 볼 수 있다.
- name=value 쌍으로 구성
- 각 쌍은 ;로 구분, 쌍 하나는 하나의 독립된 쿠키
💡 쿠키 쓰기
document.cookie에 직접 값을 쓸 수 있다.
cookie는 데이터 프로퍼티가 아닌 접근자 프로퍼티이다. 따라서 document.cookie에 값을 할당하면, 브라우저는 이 값을 받아 해당 쿠키를 갱신하지만 다른 쿠키의 값은 변경되지 않는다.
📌 쿠키의 형식
encodeURIComponent를 사용해 인코딩한다.
📌 쿠키의 한계
encodeURIComponent로 인코딩한 이후의 name=value 쌍이 4KB를 넘는다면 쿠키에 저장할 수 없다.
💡 쿠키 옵션
쿠키의 몇몇 옵션은 아주 중요하므로 꼭 지정해줘야 한다.
➖ path
path=/mypath
이 경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수 있다.
- 절대 경로
- default: 현재 경로
➖ domain
domain=site.com
쿠키에 접근 가능한 도메인을 지정한다.
📌 제약사항
아무 값도 넣지 않으면 쿠키를 설정한 도메인에서만 접근 가능하며 서브 도메인(forum.site.com)에서도 접근 불가능하다.
➖ expires / max-age
유효 일자나 만료 기간 옵션이 지정되어 있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제된다. 이러한 쿠키를 '세션 쿠키(session cookie)라고 부른다.
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;- 설정된 expires에 도달하면 브라우저는 쿠키를 자동으로 삭제한다.
- expires는 반드시 GMT 포맷으로 설정해야 한다.
- max-age는 쿠키 만료 일시까지의 시간을 초로 환산한 값을 설정할 수 있게 해준다.
➖ secure
HTTPS로 통신하는 경우에만 쿠키가 전송된다.
암호화되지 않은 HTTP 연결을 통해 전달되는 걸 원치 않을 때 사용한다.
➖ samesite
크로스 사이트 요청 위조(cross-site request forgery, XSRF) 공격을 막기 위해 만들어진 옵션이다.
➖ httpOnly
📚 localStorage / sessionStorage
localStorage와 sessionStorage는 web storage object로 브라우저 내에 key-value 쌍을 저장할 수 있게 해준다
📌 쿠키와 다른점
- 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.
- 쿠키보다 용량이 크다.
- 개발자가 웹 스토리지 구성 방식을 설정할 수 있다.
- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다.
- origin(도메인.프로토콜.포트)에 묶여있다.
📌 공통 메서드와 프로퍼티
- setItem(key, value): 키-값 쌍을 보관한다.
- getItem(key): 키에 해당하는 값을 받아온다.
- removeItem(key): 키와 해당 값을 삭제한다.
- clear(): 모든 것을 삭제한다.
- key(index): 인덱스(index)에 해당하는 키를 받아온다.
- length: 저장된 항목의 개수를 얻는다.
💡 localStorage
✔ origin이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
✔ 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
➖ 키 순회하기
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
alert(`${key}: ${localStorage.getItem(key)}`);
}스토리지 객체는 iterable 객체가 아니지만 배열처럼 다루면 전체 키-값을 얻을 수 있다.
일반 객체처럼 for in 반복문을 사용해도되지만 이 방법을 사용하면 필요하지 않은 내장 필드까지 출력되므로 hasOwnProperty를 이용해 프로토타입에서 상속받은 필드를 골라내야 한다.
➖ 키와 값의 형식
localStorage의 키와 값은 반드시 문자열이어야 한다. 다른 자료형을 사용하면 문자열로 자동 변환된다.
💡 sessionStorage
localStorage에 비해 제한적이라 자주 사용되진 않는다.
✔ 현재 떠 있는 탭 내에서만 유지된다.
✔ 새로고침할 때는 사라지지 않지만 탭을 닫고 새로 열 때는 사라진다.
💡 storage 이벤트
스토리지의 데이터가 갱신될 때 스토리지 이벤트가 실행된다.
📌 storage 이벤트 프로퍼티
- key: 변경된 데이터의 키(.clear() 호출했다면 null)
- oldValue: 이전 값(키가 새롭게 추가되면 null)
- newValue: 새로운 값(키가 삭제되었으면 null)
- url: 갱신이 일어난 문서의 url
- storageArea: 갱신이 일어난 스토리지 객체
