기존의 쿠키에 대한 제약들을 해소하고 조금 더 다양하고 클라이언트에 다양한 기능을 넣고자 HTML5부터 등장하였습니다.
쿠키의 제약
브라우저 저장소란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 하는 기능입니다. 따라서 도메인별로 각기 다른 스토리지가 생성이 됩니다. localStorage와 sessionStorage가 있으며 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회합니다.
// 데이터 저장
localStorage.setItem('key', 'value');
// 키를 통해 데이터를 호출
localStorage.getItem('key');
// 해당 키를 삭제
localStorage.removeItem('image');
// 해당 스토리지에 존재하는 모든 스토리지 객체 항목 삭제
localStorage.clear();
// 데이터 저장
sessionStorage.setItem('key', 'value');
// 키를 통해 데이터를 호출
sessionStorage.getItem('key');