Web Storage
HTML5에 웹 데이터를 클라이언트에서 저장할 수 있는 새로운 자료구조인 Web Storage가 추가되었습니다.
Web Storage의 개념은 키/값 쌍으로 데이터를 저장하며 키를 기반으로 데이터를 조회하는 패턴입니다.
그리고 영구 저장소, 임시 저장소를 구분해서 사용할 수 있습니다.
LocalStorage, SessionStorage
localStorage와 sessionStorage의 차이점음 영구성입니다.
localStorage는 브라우저 창을 닫아도 저장소에 저장된 데이터는 지워지지 않고 다시 브라우저 창을 열어도 그 데이터가 그대로 유지됩니다.
sessionStorage는 브라우저 창을 닫으면 저장소에 저장된 데이터는 지워지며 다시 브라우저 창을 열어도 그 전의 데이터를 유지하지 않고 사라집니다. 즉, 두 Web Storage의 차이점은 영구성이며 모두 전역 객체의 프로퍼티입니다.
그리고 Storage 객체를 상속받기 때문에 localStorage와 sessionStorage가 사용하는 메서드는 setItem, getItem, removeItem, clear로 모두 동일하게 동작합니다.
Web Storage를 사용하며 주의점으로는 setItem 메서드를 사용하여 키/값 쌍으로 데이터를 저장하면 항상 문자열로 저장되며 getItem 메서드로 호출하면 문자열이 출력됩니다. 만약 객체 타입을 저장하고 싶을 경우 바로 객체 타입을 작성하지 않고 JSON.stringify()로 객체를 감싸서 직열화를 해주며 저장한 데이터를 출력하고 싶을 경우 JSON.parse로 역직렬화를 해줘야 정확한 데이터를 출력받을 수 있습니다.
Cookie
Cookie는 Web Storage가 나오기 이전에 브라우저 저장소 역할을 해왔습니다.
쿠키는 만료기간이 있는 key-value storage입니다.
쿠키는 하나의 도메이 페이지에서 최대 20개, 4KB의 용량제한이 있습니다.
매 요청마다 서버로 쿠키가 같이 전송(쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문)됩니다.
서버로 전송안해도 되는 불필요한 데이터 또한 서버로 보내는 단점을 가지고 있어서 web Storage가 생기고 localStorage, sessionStorage에 저장하면 됩니다.
반영구적으로 데이터를 저장할 수 있으며 유효기간을 정할 수 있습니다.
