Cookie
Cookie는 도메인 단위로 저장되며, 사이트마다 다르지만 표준안 기준 사이트당 최대 20개 및 4KB까지 데이터 저장이 제한되고 영구적으로 브라우저에 저장하는 것이 불가능합니다.
개발자 도구 -> 애플리케이션 -> 쿠키 -> 사용 포트에서 쿠키를 확인이 가능합니다.
document의 쿠키 속성에 "a=1"이라는 문자를 할당하고 쿠키를 확인하면 a라는 이름을 가지고 있고 1의 값을 가진 쿠키를 확인할 수 있습니다.
*추가적으로 "a=3" 할당 시 a라는 이름의 쿠키의 값은 3으로 바뀌게 됩니다.
추가적으로 "b=2"를 할당하게 되면 쿠키가 누적되는 것을 확인할 수 있습니다.
쿠키의 경우 값을 지정할 때 아래와 같은 옵션을 사용할 수 있습니다.
- domain : 쿠기가 저장되는 도메인을 설정할 수 있습니다. (지정하는 데이터의 도메인 정보와 현재 도메인 정보가 일치하지 않으면 해당 데이터는 저장이 되지 않습니다.)
- path : 도메인의 하위 경로를 설정할 수 있습니다. (도메인의 상세 경로 또한 일치하지 않으면 데이터는 저장되지 않습니다.)
- expires : 데이터가 유효할 수 있는 날짜를 설정할 수 있습니다.
- max-age : 데이터가 유효할 수 있는 시간을 설정할 수 있습니다.
*만료 날짜와 시간을 별도로 지정하지 않게 되면 브라우저 종료 시 해당 쿠키도 만료되게 됩니다.
쿠키는 정보를 만료 날짜, 시간을 설정하여 관리를 할 수 있다는 장점이 있지만, 저장 개수와 용량 제한이 심해 일반적인 데이터를 브라우저에 저장하는 용도로는 적합하지 않습니다. 또한 데이터를 저장하고 가져오는 코드를 작성하는 것이 다소 불편합니다.
Storage
Storage는 도메인 단위로 데이터를 저장하며 쿠키보다는 많은 용량(최대 5MB)으로 데이터를 저장할 수 있고 세션(브라우저 종료 시 만료) 혹은 영구 저장이 가능합니다.
[ sessionStorage ] : 세션 단위로 저장되기 때문에 브라우저의 세션이 유지되는 동안에만 데이터를 저장합니다.
[ localStorage ] : 별도로 데이터를 제거하지 않으면 영구적으로 데이터를 저장합니다.
Storage의 경우 아래의 메서드를 사용하여 데이터 관리가 가능합니다.
- getItem : Storage에 저장된 데이터를 조회할 수 있습니다.
- setItem : Storage에 데이터를 저장을 할 수 있습니다.
*Storage에 데이터를 저장할 때는 문자 상태로 저장되기 때문에 객체 저장 시 임의의 상태로 저장되어 [object object]로 저장이 되기 때문에 JSON 객체의 stringify 메서드를 사용하여 문자화 진행 후 저장해주어야 합니다.
- removeItem : 인자로 전달받은 문자의 키를 가진 데이터를 찾아 제거합니다.
- clear : Storage의 모든 데이터를 제거합니다.
정리
Storage는 만료의 개념이 없고 별도로 데이터를 제거해주어야 하기 때문에 sessionStorage를 사용하여 데이터 저장을 만료해주어야 합니다.
시간이 지나서 데이터가 제거되어야 한다면 Storage가 아닌 Cookie를 사용하여 데이터를 저장할 수 있습니다.
Cookie의 대표적인 예로 사이트의 팝업창 하루 동안 열지 않기 버튼에 사용되며, Storage의 예로 데이터를 저장하고 불러오고 삭제하는 것에 상대적으로 편리하고 용량도 많이 때문에 만료되는 데이터가 아닌 일반적인 데이터를 브라우저에 저장하는 용도로 편리하게 사용할 수 있습니다.
Cookie와 Storage는 서로의 장단점에 맞게 적절하게 사용하면 됩니다.
