[WEB] 브라우저 저장소

 

브라우저 저장소

 

---

 

# 브라우저 저장소가 필요한 이유

 

 웹은 HTTP 프로토콜로 통신한다. HTTP는 클라이언트-서버 간의 통신이 끝나면 상태 정보를 저장하지 않고 접속을 종료한다는 특징이 있다. 예를 들어, 로그인을 하고 난 뒤 마이페이지를 접속하려 할 때, 서버는 로그인을 한 사용자와 마이페이지에 접속하려는 사용자가 같은 사람인지 알지 못한다. 따라서 서버가 사용자를 식별하고 정보를 저장하기 위해 쿠키라는 기능이 도입되었다. 

 

 

# 쿠기

 

 사용자의 브라우저에 저장되는 작은 크기의 문자열 정보이다. 웹 사이트를 사용하는 사용자의 정보를 저장한다. 서버와 데이터를 주고 받기 위한 용도로 사용되며, 만료시간을 지정할 수 있다. (그래서 로그인 창의 자동완성 기능, 공지사항 오늘 하루 보지 않기 기능 등에 이용된다.) 그러나 용량이 작고 HTTP 요청을 할 때마다 서버에 데이터를 전송하므로 데이터 전달 낭비가 된다는 단점이 있다. 또한, 제 3자도 조회할 수 있기 때문에 중요한 정보는 담을 수 없다. 

 

 

# 웹 스토리지

 

 쿠키의 단점을 해결하기 위해 HTML5에서는 데이터를 클라이언트에 저장할 수 있는 웹 스토리지가 도입되었다. 

 

- 단순 문자열을 넘어 객체도 저장할 수 있다.

- 쿠키는 만료일자를 지정하게 되어 있어 언젠가는 제거되지만 웹 스토리지에는 만료 기간이 없다. 즉, 영구적이다.

- 쿠키는 데이터를 매번 서버로 전송하지만 웹 스토리지는 서버로 전송하지 않는다.

 

 웹 스토리지의 종류에는 LocalStorage와 sessionStorage가 있다.

 

 

1. LocalStorage

 

- 브라우저를 닫았다가 열어도 데이터가 유지된다.

- 도메인 단위로 생성되기 때문에, 도메인만 같으면 전역적으로 공유할 수 있다.

- windows 전역 객체의 LocalStorage에 저장된다.

 

 

2. SessionStorage

 

- 브라우저를 닫으면 삭제된다. (새로고침은 상관 없음)

- 같은 도메인이어도 브라우저가 다르면 값이 공유되지 않는다.

- windows 전역 객체의 sessionStorage에 저장된다.

 

 

웹 스토리지는 자동 로그인 기능, 페이지 이동 시 데이터 유지 기능에 유용하게 사용될 수 있다.

 

---

 

참고 자료

 

https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie

https://pxd-fed-blog.web.app/webStorage/

https://medium.com/gdana/localstorage-sessionstorage-cookie-cache-6ac9f776ab67