Application - LocalStorage, SessionStorage, Cookie

WEB STORAGE란?

HTML5 에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴입니다. 그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다.

Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념입니다. 사실 거의 차이가 없어보일지라도 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었습니다. 쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장도구 입니다. HTML5 에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제하는 것은 아닙니다. HTML5 에서도 여전히 쿠키를 이용할 수 있습니다.

LocalStorage와 SessionStorage

Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다.
우선 기본적으로 Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한되며, 즉 A 도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. 이것은 데이터의 보안적 측면에서 당연한 원칙.

• LocalStorage

  도메인마다 별도로 로컬 스토로지가 생성되며 Windows 전역 객체의 LocalStorage 라는 컬렉션을 통해 저장/조회가 이루어짐.

  • 데이터의 만료기간이 없으며 사용자가 데이터(명시적)를 지우지 않은 한 영구적으로 보존된다.

  • 사이트 재 방문시 이전에 저장되었던 정보를 이용 할 수 있어 활용도가 높다.

  • 사용자 설정 저장, 브라우저를 닫고 열었음에도 정보가 남아야 하는 것들을 저장할 때 사용한다.

    ex)
    localStorage.setItem("key", "value");
    localStorage.getItem("key");
    localStorage.removeItem("key");
    clear()

• SessionStorage

  windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장/조회가 이루어짐.

  • 데이터의 세션이 끝나면(브라우저 종료) 데이터가 지워진다.

  • 휘발성 데이터를 저장할 때 사용한다.

sessionStorage.setItem('key', 'value);
sessionStorage.getItem('key');
sessionStorage.removeItem('key');
sessionStorage.clear(); // All clear

• 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다.

• 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성함.

• 탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화합니다.

sessionStorage에 저장한 자료는 페이지 프로토콜별로 구분.

특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 sessionStorage에 저장.

	LocalStorage	SessionStorage
저장 범위	도메인, 브라우저	도메인, 브라우저, 탭
영구적 저장	yes	no
예	자동 로그인	일회성 조회

⚠ password, 개인정보는 중요한 정보는 저장하면 안됨.

쿠키는 웹페이지 방문시 방문 기록같은 브라우저에서의 정보들이 저장된 텍스트파일로 웹서버가 브라우저에 보내 저장했다가 서버의 요청이 있을때 다시 서버로 보내주는 작은 데이터입니다.

쿠키는 서버 사용자의 웹 브라우저에 저장하며 데이터 형태는 Key, Value형태의 String문이며 ,4kb이상 저장이 불가합니다.