이 글은 Storage에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요!
개발자 도구 Application 탭을 열어보면 Storage라는 카테고리가 있다. 여기엔 크게 로컬 스토리지, 세션 스토리지, 쿠기가 있고 그 밖에 IndexedDB와 Web SQL을 확인할 수 있는데, 도대체 이것들이 무엇이고 언제 사용하는지, 그리고 서로에 대한 차이점에 대해 알아보자!!
Cookie
쿠키가 무엇인가?
쿠키란, HTTP의 일종으로써 인터넷 사용자가 어떤 웹페이지를 방문할 경우, 그 페이지가 사용하고 있는 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다. 쿠키의 종류는 다음과 같다.
- Session Cookie
보통 만료시간을 설정하고 메모리에만 저장되는 쿠키. 브라우저가 종료되면 삭제된다.
- Persistent Cookie
장시간 유지되는 쿠키다. 파일로 저장되며, 브라우저 종료와 관계없이 사용된다.
- Secure Cookie
HTTPS에서만 사용된다. 정보가 암호화되어 전송되는 특징이 있다.
- Third-Party Cookie
방문한 도메인과 다른 도메인의 쿠키다. 일반적으로 광고 배너 등을 관리할 때 유입 경로를 추적하기 위해 사용된다.
쿠키를 왜 사용할까??
HTTP의 요청은 상태를 가지고 있지 않다.(상태를 가지지 않는 상태를 Stateless라 한다!) 상태를 가지지 못한 상태라면, 요청 역시 누구에게 오는지 출처를 알 수 없다. 물론 출처를 모르기 때문에 응답 역시 보낼 수 없게 된다. 이런 상황을 해결하기 위해 쿠키를 이용한다. 쿠키에 정보를 담아 서버로 보내면 서버에서는 쿠키를 통해 정보를 읽고 출처를 파악할 수 있게 된다.
🤔쿠키의 사용이유를 더 알아보자!
우리가 웹페이지에서 로그인을 하게 되면, 여러 가지 기능을 이용할 수 있게 된다. 최근 웹페이지에선 수 많은 기능과 서비스들이 등장하고 있는데, 특히 정보를 유지할 수 없는 Stateful한 서비스들이 많아졌다.(대표적으로 장바구니) 때문에 Connectionless 혹은 Stateless 성격을 가진 HTTP의 단점을 보완하기 위해 쿠키라는 개념이 등장하게된 것이다.
🤔쿠키를 안전하게 사용하는 법
해당 쿠키에 대해 httpOnly 플래그를 true로 설정하여 쿠키를 안전하게 만들 수 있다. 이렇게 하면 쿠키에 대한 클라이언트 측 액세스가 차단된다.
쿠키의 장점
- 대부분 브라우저에 지원이 된다. 즉, 호환성이 매우 뛰어나다.
쿠키의 단점
쿠키의 단점은 너무 명확하다.
- API가 한번 더 호출되므로 서버에 부담이 증가된다.
- 쿠키는 만료 기한이 있다.(유형에 따름)
언젠가 사라질 운명...(참고로 만료 기간은 서버나 클라이언트 축에서 설정이 가능하긴 하다. 일반적으로 서버에서 설정!!)
- 쿠키자체의 용량이 매우 작다.
하나의 쿠키 당 4KB의 정보를 담을 수 있다.
- 보안에 매우 취약하다.
Persistent Cookie를 예로 들면, 이 쿠키는 사용자의 PC에 저장된다고 했다. PC에 저장된다는 건 공용 PC환경에도 노출될 수 있다는 의미다. 이렇게 하드디스크에 저장되는 쿠키의 정보를 얻는 일은 매우 쉬운 일이 된다. 특히 이렇게 노출된 쿠키에 사용자의 ID, PW 등 암호화된 개인정보가 담겨있다면 그대로 복사, 붙여 넣기 하여 인증 없이 로그인이 가능해지는 상황이 발생한다. 이 밖에도 JavaScript를 이용하여 쿠키 값을 탈취할 수도 있으며, 암호화되지 않은 쿠키가 네트워크를 통해 전송되면 스니핑 공격에 노출될 수 있다.
Web Storage
로컬 스토리지, 세션 스토리지의 합집합 개념??
웹 스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 웹 스토리지는 로컬 스토리지와 세션 스토리지를 포함하고 있다. 웹 스토리지의 특징은 Key값과 Value값을 저장할 수 있다.
로컬, 세션 스토리지는 모두 window객체 안에 들어있고, Storage객체를 상속받기 때문에 메소드가 공통적으로 존재하고 있다.(편리함 그 자체) 로컬, 세션 스토리지에 대한 자세한 내용은 밑에서 계속 다루도록 하겠다.
Local Storage
로컬 스토리지
로컬 스토리지는 window.localStorage에 위치하고 있다. 위에서 언급한 바와 같이 Key, Value값을 저장할 수 있고, 순서대로 작성하여 저장할 수 있다. 로컬 스토리지의 값들은 JavaScript를 통해서만 삭제가 가능하며 저장 용량 한도는 세션 스토리지, 쿠키보다 가장 높은 용량을 보유하고 있다. 참고로 로컬 스토리지의 데이터는 서버로 전송되지 않는다.
로컬 스토리지의 Value값은 문자열(String), 불린(Boolean), 숫자(Number), null, undefined 등을 저장할 수 있지만, 모두 문자열로 반환한다!!!(뭐야...) Key값도 문자열로 반환된다.
localStorage.setItem(Key, Value)
setItem() 메소드를 통해 로컬 스토리지에 값을 저장한다.
localStorage.getItem(Key, Value)
getItem() 메소드를 통해 로컬 스토리지의 값을 조회한다.
localStorage.removeItem(Key)
removeItem() 메소드를 통해 로컬 스토리지의 해당 Key값을 지운다.
localStorage.clear()
clear() 메소드를 통해 로컬 스토리지 전체를 비운다.
로컬 스토리지는 브라우저를 종료해도 데이터가 유지되며 만료 기간이 없다. 하지만 도메인이 다른 경우에는 로컬 스토리지에 접근할 수 없다. 쉽게 말해 '네이버'에서 로컬 스토리지에 저장한 정보를 구글에서 접근할 수 없다는 의미다.
참고로 로컬 스토리지에는 보안에 민감하지 않은 데이터를 저장한다.(한 번 저장되면 추후 삭제 코드를 작성하지 않는 이상 영구적으로 존재하는 정보들이기 때문!!)
🤔로컬 스토리지는 객체도 저장한다.
하지만 제대로 저장되지 않는다... toString() 메소드가 호출된 형태로 저장된다. 때문에 객체를 제대로 저장하기 위해선 다음 두 가지 방법이 있다. 참고하자!
🤔JSON.stringfy()
localStorage.setItem('객체', JSON.stringify({ test: 'example' }));
🤔JSON.parse()
JSON.parse(localStorage.getItem('객체')); // { test: 'example' } 조회
로컬 스토리지의 장점
- 서버에 불필요한 데이터를 저장하지 않는다.
- 세션 스토리지, 쿠키보다 용량이 크다.
로컬 스토리지의 단점
- 호환이 좋지 않다.
웹 스토리지는 HTML5에 등장한 새로운 기능이라고 앞서 언급하였다. 때문에 HTML5 미만의 브라우저 환경에는 호환되지 못한다.
Session Storage
세션 스토리지
세션 스토리지는 window.sessionStorage에 위치하고 있다. 사실 세션 스토리지는 로컬 스토리지와 비교하였을 때, 사용하는 메소드도 같고 로컬 스토리지보다 용량은 작지만, 쿠키보다 저장 용량 한도도 큰 편이다.(최소 5MB) 결국 장단점도 용량의 차이를 제외하고 로컬 스토리지와 공유를 하는 셈인데, 기능적으로 다른 점이 있다.
- 브라우저가 종료되면, 데이터가 삭제된다??
세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 쉽게 말하면 여러 개의 브라우저 탭이 실행 중 일 때, 탭마다 개별적으로 데이터가 저장된다는 의미다. 이 때, 세션 스토리지는 로컬 스토리지와 다르게 브라우저를 종료하면 자동으로 저장소 데이터가 제거된다. 참고로 세션 스토리지의 데이터역시 서버로 전송되지 않는다.
- 세션이 같지 않으면 서로 남남?
세션 스토리지는 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.
정리
Cookie vs Local Storage vs Session Storage
Cookie
- 후속 요청으로 서버로 다시 보내야하는 데이터를 저장한다. 만료는 유형에 따라 다르며 만료 기간은 서버 측 또는 클라이언트 측(일반적으로 서버 측)에서 설정할 수 있다.
- 쿠키는 주로 서버 측에서 읽기(클라이언트 측에서 읽을 수도 있음) 위한 것이다. 참고로 Local Storage 및 Session Storage는 클라이언트 측에서만 읽을 수 있다.
- 크기는 4KB보다 작아야 한다.
- 해당 쿠키에 대해 httpOnly 플래그를 true로 설정하여 쿠키를 안전하게 만들어 클라이언트 측의 액세스를 차단할 수 있다.
Local Storage
- 영구적인 데이터를 저장할 수 있다. 하지만 JavaScript로 저장소 데이터를 지울 수 있다!
- 위 3가지 중 가장 높은 저장 용량을 보유하고 있다.
Session Storage
- Session Storage 객체는 세션에 대해서만 데이터를 저장한다. 브라우저 또는 탭이 닫히면 세션 스토리지의 데이터는 모두 삭제된다.
- 데이터는 서버로 전송되지 않는다.
- 저장 용량 한도가 쿠키보다 크다(최소 5MB).
'ivory's DevLog' 카테고리의 다른 글
| CORS란? (2) | 2020.10.02 |
|---|---|
| SSR(Sever Side Rendering)과 CSR(Client Side Rendering) (1) | 2020.09.30 |
| 브라우저 렌더링 과정 (0) | 2020.09.23 |
| REST API(RESTful API)와 GraphQL (1) | 2020.09.22 |
| [JavaScript] - Callback과 Promise (0) | 2020.09.18 |