브라우저 저장소 (local Storage, session storage, cookie)

Web Storage

나무위키 Web Storage

 

DOM 저장소 라고도 하는 웹 저장소는 웹 앱에 클라이언트 측 데이터를 저장하기 위한 방법과 프로토콜을 제공합니다. 웹 저장소는 쿠키와 유사하지만 용량이 크게 향상되었으며[1] HTTP 요청 헤더에 정보가 저장되지 않은 영구 데이터 저장소를 지원합니다.[2] 두 가지 주요 웹 저장소 유형이 있습니다: 로컬 저장소 및 세션 저장소, 각각 영구 쿠키 및 세션 쿠키와 유사하게 작동합니다. 웹 스토리지는 W3C(World Wide Web Consortium)[3] 및 WHATWG[4]에 의해 표준화되었습니다. 모든 주요 브라우저에서 지원합니다.

 

즉, Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 단에 저장할 수 있는 기능.

Web Storage는 key/value 쌍으로 데이터를 저장하고, key 기반으로 데이터를 조회한다. 데이터의 지속성을 구분할 수 있어 응용환경에 맞는 선택이 가능.

Web Storage에는 local Storage 와 Session Storage가 있다. 스토리지는 각각의 고유한 특성이 있으며, 프로그래머의 필요에 따라 선택적으로 사용된다.

 

Cookie

쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일입니다. 웹사이트는 쿠키를 통해 접속자의 장치를 인식하고, 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장합니다.

일반적으로 쿠키에는 만료일이 있습니다. 쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송이 된다.

 

localStorage & sessionStorage

Web Storage는 데이터의 지속성과 관련하여 두가지 용도의 저장소를 제공한다.

기본적으로 Web Storage는 Cookie와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. 예를 들면, a 도메인에 저장한 데이터는 b도메인에서 조회할 수 었다. 이는 데이터의 보안 측면에서 당연하다.

 

1.LocalStorage

• 저장한 데이터 영구적으로 보관가능(브라우저 종료하더라도 다음번에 접속해도 그 데이터를 사용할수 있다.)
• 도메인 마다 별도로 localStorage가 생성된다.
• Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어 진다.
• 도메인만 같으면 전역으로 공유 가능하다.

2.SessionStorage

• 데이터가 지속적으로 보관되지 않는다. 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.
• Windows 전역 객체의 sessionStorage 라는 컬렉션을 통해 저장과 조회가 이루어진다.
• 브라우저가 종료되면 데이터도 같이 지워진다.(브라우저가 종료되면 SssionStorage도 삭제된다는 뜻이다)
• 도메인별로 별도로 생성된다.
  같은사이트 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이된다.
  (브라우저 컨텍스트가 다르기 때문)
• 브라우저를 하나 더 실행해서 같은 페이지를 실행 했을때, 이 두페이지의 sessionStorage는 각각 별개의 영역으로 침범하지 못한다.

 

Web Storage와 Cookie 비교

1. 쿠키는 매번 서버로 전송된다.

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.

 

2. 단순 문자열을 넘어 객체정보를 저장할 수 있다.

문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다. 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.

 

3.용량의 제한이 없다.

쿠키는 개수와 용량에 있어 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다. 그러나 Web Storage에는 이러한 제한이 없다. 그러나 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수 있습니다. 그리고 대부분 쿠키의 제한으로까지 데이터를 저장할 일이 없다.

 

4. 영구 데이터 저장이 가능하다.

키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.

WebStorage와 쿠키의 차이점에 대해서 WebStorage가 특별히 좋은 이유는 없다고 봐도 무방하다. 다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용하다.

 

 

 

출처 : https://velog.io/@gay0ung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C