로컬스토리지, 세션스토리지, 쿠키 모두 데이터를 저장하는 저장소입니다.

'key-value' 값으로 데이터를 저장하며, key와 value는 문자열로 변환됩니다.

이 세가지 저장소의 가장 큰 차이점은 데이터 보관 기간이라고 할 수 있습니다.

로컬스토리지

• 로컬 스토리지에 저장된 데이터는 사용자가 직접 삭제하지 않는 이상 영구적으로 보관 가능합니다.
• 지속적으로 필요한 데이터는 로컬 스토리지에 저장 (자동 로그인)

세션스토리지

• 브라우저를 닫을 경우 데이터가 제거되어, 데이터가 영구적으로 보관되지 않습니다.
• 서버에 불필요하게 데이터를 저장하지 않는다.
• 잠깐동안 필요한 정보는 세션 스토리지에 저장 (일회성 로그인 정보, 입력 폼 정보, 비로그인 장바구니 등)

쿠키

• 만료 기한이 있는 저장소. 서버나 클라이언트에서 만료기간을 설정할 수 있습니다.
• 4kb의 용량 제한
• 저장된 데이터가 모든 HTTP 요청마다 포함되기 때문에 클라이언트와 서버 사이의 트래픽이 증가하여 서버에 부담이 됩니다.
• 다시 보지 않음 팝업 창

로컬스토리지와 세션스토리지
로컬 스토리지는 window 객체에 포함되어있으며, 로컬 스토리지와 세션 스토리지는 동일한 메소드를 갖습니다. 데이터를 저장할 때에는 setItem(), 불러올 때에는 getItem()를 사용합니다.
특정 데이터를 삭제하는 removeItem(), 전체 데이터를 삭제하는 clear()가 있습니다. 만약, value에 객체를 넣어야 할 때에는 JSON.stringify() 메서드를 활용하여 문자열로 변환 후 저장해야 합니다. 그렇지 않으면 객체를 통째로 넣을 수 없습니다. 그리고, 그렇게 저장된 데이터를 꺼내올 때에도 역시 JSON.parse()를 통해 객체로 변환해야 합니다.