Web Storage
HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능
쿠키(cookie)와 비슷한 기능이며, Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다.
영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.
Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다.
예를 들면, A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다.
이는 데이터의 보안 측면에서 당연한 것이다.
Web Storage의 특징
-
서버 전송이 없다.
저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어 지지 않는다. 이는 네트워크 트래픽 비용을 줄여준다. -
단순 문자열을 넘어 객체정보를 저장할 수 있다.
문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있는 점은 개발편의성을 제공해주는 주요한 장점이다.
단, 브라우저의 지원 여부를 확인해 봐야 하는 항목이다. -
용량의 제한이 없다.
-
영구 데이터 저장이 가능하다.
만료 기간의 설정이 없다. 즉, 한번 저장한 데이터는 직접 삭제하지 않는 한 영구적으로 존재한다.
Web Storage가 필요한 이유
쿠키와 Web Storage 모두 브라우저에 저장되지만 쿠키는 아래와 같은 단점이 있다.
쿠키의 단점을 Web Storage를 사용함으로써 극복할 수 있다.
-
4KB의 데이터 저장 제한
-
HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안이 취약하다.
-
쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다. (매번 서버로 전송된다.)
-
쿠키는 만료일자를 지정하게 되어있어 언젠가 제거 된다.
Web Storage의 종류
Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다.
LocalStorage
-
브라우저를 닫았다가 다시 열어도 계속 유지된다.
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다. -
도메인마다 별로도 LocalStorage가 생성된다.
-
도메인만 같으면 전역으로 공유가 가능하다.
-
window.localStorage에 위치한다.
localStorage.setItem('name', 'zerocho');
localStorage.setItem('birth', 1994);
localStorage.getItem('name'); // zerocho
localStorage.getItem('birth'); // 1994 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로 저장된다.
객체를 저장하려면 두 가지 방법이 있다.
그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있고, 한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 해서 저장하고, 받을 때는JSON.parse하는 방법이 있다.
localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }SessionStorage
-
브라우저가 열려있는 한 페이지를 Reload해도 계속 유지된다.
하지만 브라우저를 닫으면 삭제된다. -
데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.
Web Storage의 기본 보안처럼 도메인별로 별도로 생성되지만, 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. -
window.sessionStorage에 위치한다.
LocalStorage와 모든 메소드가 동일하다.
정리
-
결국엔 쿠키와 마찬가지로 클라이언트 단에 저장된다. 크게 보면 용량이 큰 쿠키와 다를바가 없다. (약4KB vs 약5MB)
-
클라이언트 단에 저장되므로 중요한 정보를 담아선 안된다.
-
쿠키와는 달리 서버로 값을 전송하지 않는다. 서버의 부하가 줄어드는 장점이 있다.
-
세션 스토리지는 브라우저 TAB마다 개별적으로 저장된다.
예를 들어 세션 스토리지를 이용해 로그인을 구현한다면 같은 사이트라도 한 창은 로그인, 한 창은 비로그인 상태일 수 있다. -
도메인별로 관리하고 싶다면, 로컬 스토리지에 저장할 것. 단 로컬 스토리지에 저장한다면, 인위적으로 지워주지 않는 이상 로그인이 풀리지 않는다.
-
결국 프런트 단에서 로그인/비로그인 흉내를 내기 위해 쿠키/로컬 스토리지/세션 스토리지 어떤 걸 사용하든 결과는 많이 허술하다.
Reference
https://akdl911215.tistory.com/317?category=975797
https://developingbear.tistory.com/140
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
