Web Storage
Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. 쿠키(cookie)와 비슷한 기능이다.
WebS Storage의 개념은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.
Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. 예를 들면, A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. 이는 데이터의 보안 측면에서 당연하다.
Web Storage가 필요한 이유
쿠키와 Web Storage 모두 브라우저에 저장되지만 쿠키는 아래와 같은 단점이 있다. 이러한 쿠키의 단점을 Web Storage를 사용함으로써 극복할 수 있다.
- 4KB의 데이터 저장 제한
- HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다.
- 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.
Web Storage와 Cookie의 비교
쿠키는 매번 서버로 전송된다.
웹사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함해 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지는 않는다. 이는 네트워크 트래픽 비용을 줄여준다.
Web Storage는 단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.
문자열 기반 데이터 외에 체계적으로 구조화된 객체를 저장할 수 있다. 이는 개발 편의성을 제공해주는 장점이다. (단, 브라우저의 지원 여부를 확인해봐야 한다.)
Web Storage는 용량의 제한이 없다.
쿠키는 개수와 용량에 제한이 있다. 클라이언트에 최대 300개의 쿠키를 저장할 수 있으며, 하나의 사이트(도메인)에서는 최대 20개를 저장할 수 있다. 또한, 하나의 쿠키값은 최대 4KB로 제한되어 있다.
그러나 Web Storage에는 제한이 없다. 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수는 있으나, 대용량으로 쿠키를 저장할 일은 없다.Web Storage는 영구 데이터 저장이 가능하다.
쿠키는 만료일자를 지정하게 되어있어 언젠가 제거된다. 만약 만료일자를 지정하지 않으면 ✔️세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
Web Storage는 만료기간의 설정이 없다. 즉, 한 번 저장한 데이터는 영구적으로 존재하게 된다.
✔️ 세션쿠키(Session Cookie)
활성 웹 브라우저 세션이 있는 기간동안 저장된다. 세션쿠키는 일반적으로 웹 브라우저를 닫을 때 삭제된다.
✔️ 영구쿠키/지속적쿠키(Persistent Cookie)
각 쿠키에 지정된 기간동안 또는 장치에서 쿠키를 수동으로 삭제할 때까지 장치에 남아있는다.
Web Storage의 종류
- LocalStorage
: 브라우저를 닫았다가 다시 열어도 계속 유지된다. - SessionStorage
: 브라우저가 열려있는 한 페이지를 Reload해도 계속 유지된다. 하지만 브라우저를 닫으면 삭제된다.
기존에 사용하던 쿠키(cookie)와 ✔️세션(session)처럼 Web Storage도 LocalStorage와 SessionStorage를 제공한다. SessionStorage는 기존 세션처럼 서버에 저장된다고 생각할 수 있지만, 로컬 브라우저에 저장된다. 다만 생명 주기가 LocalStorage와 SessionStorage가 서로 다르다고 생각하면 된다.
✔️ 세션(session)
쿠키는 방문자의 정보를 방문자의 컴퓨터 메모리에 저장한다. 하지만 세션은 방문자의 요청에 따른 정보를 방문자 메모리가 아니라, 웹 서버가 ✔️세션 아이디 파일을 만들어 서비스가 돌아가고 있는 서버에 저장한다.쿠키와 달리 세션은 사용자의 로그인 정보에 대한 보안을 한층 업그레이드 할 수 있기 때문에, 웹사이트에 방문하여 계속 접속을 유지할 때 이전의 접속 정보를 이용할 수 있는 방법으로 많이 사용한다.
사용자에 대한 정보를 서버에 두어 보안은 쿠키보다 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다. 즉, 동시접속자 수가 많을 경우 서버에 과부하를 주게 되므로 성능 저하의 주요 요인이 된다.
세션도 쿠키처럼 만료일을 설정할 수 있지만, 브라우저가 종료되면 만료시간에 상관 없이 삭제된다.
쿠키는 서버에 요청시 세션보다 속도가 빠르다. 세션은 정보가 서버에 있기 때문에 처리가 요구되어서 비교적 속도가 느린 편이다.
보통 쿠키와 세션의 차이를 물어볼 때 저장위치와 보안적인 부분뿐만 아니라 라이프 사이클을 설명할 수 있어야 한다.( 쿠키는 브라우저를 종료하더라도 저장되어있을 수 있지만, 세션은 서버에서 만료시간/날짜를 정해서 지워버릴 수 있으며, 브라우저 종료시 저장된 데이터가 사라지게 된다. )
( + 쿠키/세션은 캐시와 다르다는 것을 기억하자. 캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것이다. 한 번 캐시에 저장되면 브라우저를 참고하기 때문에 서버에서 변경이 되어도 사용자는 변경되지 않게 보일 수 있는데, 이런 부분은 캐시를 지워주거나 서버에서 클라이언트 응답을 보낼 때 header에 캐시 만료시간을 명시함으로써 해결할 수 있다.)
✔️ 세션 ID
클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여한다. 이것이 세션 ID이다.
LocalStorage
-
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
-
도메인마다 별도로 LocalStorage가 생성된다.
: 도메인만 같으면 전역적으로 공유가 가능하다.
-
Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
SessionStorage
-
데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.
: Web Storage의 기본 보안처럼 도메인별로 별도로 생성된다. 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. ✔️브라우저 컨텍스트가 다르기 때문이다.✔️ 브라우저 컨텍스트
Document를 표시하는 환경을 말한다.
즉, 브라우저가 불러온 웹페이지라고 생각하면 된다. -
Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
💡 요약
브라우저 저장소로 Cookie와 Web Storage가 있다. Cookie와 Web Storage 모두 해당 도메인과 관련된 데이터를 클라이언트 웹브라우저에 저장할 수 있도록 해준다. 둘 다 사이트의 도메인 단위로 접근이 제한된다. 예를 들면, A 도메인에서 저장한 데이터는 B 도메인에서 접근할 수 없는 것이다.Cookie는 매번 서버로 전송되고, 문자열만 저장이 가능하며, 용량에 제한이 있고, 만료 일자가 존재한다. 이러한 부분들을 Web Storage를 사용함으로써 극복할 수 있다.
Web Storage는 데이터를 클라이언트에 저장만 할 뿐 서버로 전송되지는 않는다. 그리고 문자열 외에도 구조화된 객체를 저장할 수 있어 개발 편의성을 제공해주고, 하나의 사이트에서 저장할 수 있는 용량이 제한되어있지 않다. 또한, Web Storage에 한 번 저장한 데이터는 영구적으로 존재하게 된다.
WebStorage는 지속성에 따라 LocalStorage와 SessionStorage로 구분할 수 있다.
LocalStorage는 저장한 데이터를 명시적으로 지우지 않는한 영구적으로 보관이 가능하다. 도메인마다 별도로 LocalStorage가 생성되며, 도메인만 같다면 전역적으로 공유가 가능하다.
SessioniStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. 도메인마다 별도로 생성되는 점은 LocalStorage와 같지만, 같은 사이트의 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. 이는 브라우저 컨텍스트가 다르기 때문이다.
이처럼 Web Storage는 영구저장소(LocalStorage)와 임시저장소(SessionStorage)가 구분되기 때문에, 데이터의 지속성에 따라 선택이 가능하다.
잘읽었습니다.