이 글은 Faith Chikwekwe님의 글을 번역한 것입니다.
Cookies는 오래동안 웹 사이트를 방문하는 사용자의 정보를 저장하는 주된 방식이었습니다. 이는 쇼핑몰의 장바구니나 옵션과 같은 상태를 저장할 뿐만 아니라, 사용자의 검색 기록을 저장하고, 로그인 상태를 유지하는 데 사용되었습니다. HTML5가 나오면서, Local Storage라는 다른 옵션이 생겼습니다. 새로운 Javascript Storage 객체는 5MB라는 훨씬 큰 용량을 가지고 있습니다.
이제, Cookies와 Local Storage를 비교해봅시다.
Cookies — Small, but Mighty
Cookies의 기본 정보를 알아본 후에, 장단점에 대해서 살펴볼 것입니다. 그럼, Cookies는 무엇인가?
whatarecookies.com에 따르면, 웹사이트에 의해서 사용자의 컴퓨터에 저장되면 작은 텍스트 파일입니다. Cookies는 최대 4KB라는 작은 용량을 가지고 있습니다. 유저의 로그인 정보를 저장하거나 방문한 페이지를 저장하는 등의 다양한 방법으로 사용됩니다. Cookies는 string만 저장이 가능하다는 한계를 지니고 있습니다.
많은 사이트에서 유저들이 재인증을 거치지 않게 하기 위해서, Cookies를 사용해서 사용자의 정보를 저장합니다.
이 뿐만 아니라, 저장한 방문 기록을 통하여, UX를 향상시키는 데 사용하기도 합니다.
Two Types of Cookies
Cookies에는 persistent cookies 그리고 session cookies가 있습니다.
Session cookies는 만료일을 지정하지 않고, 브라우저 혹은 탭이 닫히는 즉시 삭제됩니다. 이는 은행 웹사이트를 사용할 때와 같이 탭이 닫힌 즉시 삭제되어야 하는 정보를 저장할 때 사용합니다.
Persistent cookies는 만료일을 저장하고, 만료일이 지날 때까지 사용자의 디스크에 저장합니다. 이는 특정 사이트에 대한 사용자의 행동을 저장하여 UX를 향상시키는 등 다양하게 사용합니다.
LocalStorage — A More Permanent Solution
HTML5가 나오면서, Local Storage의 많은 장점 덕분에, 다양한 상황에서 Cookies를 대체했습니다.
Local Storage는 Cookies와 다르게 HTTP 통신에 모두 전송할 필요가 없습니다. 뿐만 아니라, 사용자의 디스크에 저정되므로 인터넷 연결과 무관하게 정보를 저장합니다. 위의 두 가지 특징 덕분에, 클라이언트와 서버 사이의 트래픽과 낭비되는 대역폭을 줄일 수 있습니다. 위에서 말했듯이, Local Storage는 4KB와 비교도 안 되게 많은 5MB까지 저장이 가능합니다.
Local Storage는 Javascript code에 의해서만 삭제가 가능합니다. 이 특징은 오래동안 저장되어야 하는 큰 데이터에 이점을 가져다줍니다. Local Storage는 string뿐만 아니라, Javascript primitives와 객체도 저장가능합니다.
Uses of LocalStorage
Local Storage는 인터넷이 지속적으로 연결되지 않는 경우에, 유용하게 사용할 수 있습니다. Dani Roxberry는 수집된 정보를 인터넷이 없는 상황에서도 보호하기 위해서 Local Storage를 사용했습니다.
위의 상황에서 Local Stoarge를 사용하기 위해서는, 저장하는 데이터의 위협 수준이 낮아야합니다. 사용자의 프라이버시를 보호하기 위해서는, 인터넷에 다시 연결됐을 때, 정보를 서버에 업로드하고 Local Storage에 저장된 정보는 삭제하는 것이 좋습니다. 정보를 Local Storage에 저장할 때 암호화해서 저장하는 것도 하나의 방법입니다.
Conclusion
Cookies는 적은 정보를 저장하고 모든 HTTP 통신에 정보를 전달합니다.
반면, Local Storage는 비교적 많은 정보를 클라이언트 측에 저장할 수 있습니다.
상황과 Cookies, Local Storage의 용도 및 장단점을 고려하여 올바른 Storage를 사용해보세요.
참고자료
유익한 글 잘 보고 갑니다~^^