웹 스토리지는 데이터를 클라이언트에 저장하기 위해 만들어진 브라우저 내 저장소입니다. 웹 스토리지는 로컬 스토리지(Local Storage) 와 세션 스토리지(Session Storage) 로 나눌 수 있습니다. 둘의 차이점은 데이터의 유지 기간과 공유 범위가 다릅니다.

	로컬 스토리지	세션 스토리지
유지 기간	영구적	비 영구적
공유 범위	동일한 오리진 전역 공유	브라우저 간 공유 안됨

로컬 스토리지

로컬 스토리지는 웹 스토리지 객체로, 브라우저 내에 key-value 형태로 오리진에 종속되어 데이터가 저장됩니다. 로컬 스토리지는 사용자가 데이터를 수동으로 삭제하지 않는한 영구적으로 보관하며 만료 날짜가 없습니다. 그래서 브라우저를 종료하거나 컴퓨터를 재부팅해도 데이터가 남아있습니다. 최대 저장 용량은 5MB입니다.

로컬스토리지의 데이터는 쿠키처럼 브라우저가 자동으로 서버에 전송하지 않고, 클라이언트 쪽에서 수동으로 작업하여 서버에 보낼 수 있습니다.

• 등록: localStorage.setItem(key, value);
• 조회: localStorage.getItem(key);
• 삭제: localStorage.removeItem(key);
• 전체 삭제: localStorage.clear();

보통 로그인 유지, 최근 검색어 저장, 필터링 조건 저장 등 사용자의 행위를 장기적으로 유지하고 싶을 때 사용합니다.

로컬 스토리지는 오리진에 종속된다고 했습니다. 오리진이란 http://www.test.com 과 같은 하위 path를 제외한 사이트의 주소입니다.(프로토콜/호스트네임/포트번호 까지)
오리진이 같으면 브라우저 전역적으로(다른 창 다른 탭) 로컬 스토리지 데이터가 공유되는 특성을 가지고 있습니다.

세션 스토리지

세션 스토리지는 웹 스토리지 객체로, 브라우저 내에 key-value 형태로 오리진에 종속되어 데이터가 저장됩니다. 세션 스토리지는 브라우저가 종료되면 데이터가 삭제됩니다. 최대 저장 용량은 5MB입니다.

• 등록: sessionStorage.setItem(key, value);
• 조회: sessionStorage.getItem(key);
• 삭제: sessionStorage.removeItem(key);
• 전체 삭제: sessionStorage.clear();

오리진이 같더라도 브라우저가 각각의 세션 스토리지를 형성하여 데이터가 공유되지 않습니다.