브라우저 저장소

쿠키란?

쿠키는 브라우저에 저장되는 작은 크기의 문자열이다. 쿠키는 주로 웹 서버에 의해 만들어지는데, 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장하는데 이걸 쿠키라한다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달한다. 쿠키는 클라이언트 식별과 같은 인증에 많이 쓰인다.

1. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 '세션 식별자' 정보를 사용해 쿠키를 설정
2. 사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP Cookie 헤더에 인증 정보가 담긴 고윳값을 함게 실어 서버에 요청을 보낸다.
3. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별한다.

document.cookie 프로퍼티를 이용해 브라우저에서도 쿠키에 접근이 가능하다. document.cookie는 name=value 쌍으로 구성되고, 각 쌍은 ;로 구분된다. document.cookie에 값을 할당하면, 브라우저는 이 값을 받아 해당 쿠키를 갱신하고, 다른 쿠키의 값은 변경되지 않는다.

document.cookie = "user=John"; // 이름이 'user'인 쿠키의 값만 갱신함

형식의 유효성을 일관성 있게 유지하기 위해 반드시 encodedURIComponent를 사용해 이름과 값을 처리하는 게 좋다.

쿠키의 값은 4kb를 넘을 수 없다.

몇몇 옵션들

• path : URL path의 접두사로, 이 경로나 이 경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수 있다.
  ex. path = /admin 옵션을 사용하면 /admin, /admin/test에선 접근 가능하지만 /test 에선 접근이 불가능하다.

• domain: 쿠키에 접근 가능한 domain을 지정한다. 서브 도메인에서도 접근할 수 있게 할 때 많이 쓰인다.

• expires,max-age : expires나 max-age 옵션이 지정되어 있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제된다. 이를 세션 쿠키라고 부른다. expires나 max-age를 설정햇을 땐 브라우저를 닫아도 쿠키가 삭제되지 않고 유효 일자까지 쿠키를 유지하다가 유효 일자가 되면 쿠키를 자동으로 삭제한다.

• secrue: secure 옵션을 설정하면 HTTPS로 통신하는 경우에만 쿠키가 전송된다.

localStorage와 sessionStorage

브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 이 둘에 저장된 값은 새로고침하고 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있다. 이 둘은 쿠키와 다르게 네트워크 요청 시 서버로 전송되지 않는다. 그렇기 때문에 쿠키보다 더 많은 용량인 2MB 이상을 저장할 수 있다. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여 있어 이들 중 하나가 다르면 데이터에 접근할 수 없다.

APIs

• setItem(key,value)
• getItem(key,value)
• removeItem(key)
• clear()
• key(index)
• length

localStorage vs sessionStorage

localStorage

• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.

sessionStorage

• 현재 떠 있는 탭 내에서만 유지된다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다.
• 탭을 닫고 새로 열 때는 데이터가 사라진다.

참조: [참조1, 참조2]