Web storage
HTML의 최신 버전인 HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다.
Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.
그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.
✔ webstorage를 사용할 수 있는지 확인하는 방법
if(typeof(Stoarge) !== "undefined") {
// Webstorage 스펙 사용 가능
}Web storage vs Cookie
- 쿠키는 매번 서버로 전송된다.
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.
- 단순 문자열이 아닌 객체 정보 저장가능
webstoarge는 객체 정보를 저장할 수 있다. 문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다.
- 용량의 제한
쿠키는 개수와 용량에 있어 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다. 그러나 Web Storage에는 도메인당 최대 5MB까지 가능하다.
- 영구 데이터 저장 가능
쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.
Session storage vs Local storage
Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다.
Local Storage
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다. 도메인마다 별도로 로컬 스토로지가 생성된다. Windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
- local storage에 저장
localStorage.setItem('isActive', false);
- local storage에서 조회
localStorage.getItem('isActive'); // false❗ 현재 local storage에 없는 key에 접근하면 null을 반환한다.
localStorage.getItem('Active'); // null- local storage에서 삭제
localStorage.removeItem('isActive'); // isActive로 설정된 키로 접근하여 삭제- local storage 전체 삭제
localStorage.clear();- 장단점
장점 : 서버에 불필요한 데이터를 저장을 안 하고, 용량이 크다.
단점 : HTML4만 지원되는 브라우저에는 지원이 안된다.
Session storage
SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. SessionStorage는 windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
저장 / 조회 / 삭제 / 장단점은 Local storage와 동일하다.
- session storage에 저장
sessionStorage.setItem('isActive', false);
데이터 유지 측면
-
local storage
LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다.
ex) 자동 로그인 -
session storage
SessionStorage는 데이터가 지속적으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.
ex) 입력 폼 정보, 비로그인 장바구니
데이터 범위 측면
-
local storage
Local Storage는 도메인만 같으면 전역적으로 공유 가능하다.
탭 브라우징으로 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두페이지의 LocalStorage는 같은 영역으로 서로 침범할 수 있다. -
session storage
SessionStorage 역시 Web Storage의 기본 보안 처럼 도메인별로 별도로 생성된다. 여기 더불어 SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.
탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다.
❓ 어떤 상황에서 local을 사용해야 하고 session을 써야 할까 ?
👉 Local Storage
- 브라우저에 데이터 영구보관이 목적
- 창이 다르더라도 같은 URL이면 같은 데이터를 가져야할때
- 보안적으로 민감한 데이터를 가지고 있지않을때
👉 Session Storage
- 창(또는 탭)이 꺼지면 데이터도 같이 소멸되어야 할 때
- User Session과 같이 보안에 민감한 데이터를 저장해야 할 때
- 같은 URL인데 창(또는 탭)마다 다른 데이터를 가져야 할 때
주의할 점
웹 스토리지를 사용할 때 주의해야 할 부분이 웹 스토리지는 오직 문자형(string) 데이터 타입만 지원한다는 것이다.
예를 들어, 숫자형 데이터를 로컬 스토리지에 쓰고 다시 다시 읽어보면 다음과 같이 본래 숫자가 아닌 문자가 나오는 것을 알 수 있다.
localStorage.setItem('num', 1);
localStorage.getItem('num') === 1; // false
localStorage.getItem('num'); // "1"
typeof localStorage.getItem('num'); // "string"- 객체를 저장하는 경우 -> ❗ 원본이 출력되지 않음
localStorage.setItem('obj', {a: 1, b: 2});
localStorage.getItem('obj'); // "[object Object]"💡 해결방법
web storage를 사용할 때 위와 같은 문제를 피하기 위해서 많이 사용하는 방법은 JSON 형태로 데이터를 읽고 쓰는 것이다.
localStorage.setItem('obj', JSON.stringify({a: 1, b: 2}));
JSON.parse(localStorage.getItem('obj')); // {a: 1, b: 2}위와 같이 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화(serialization)하고, 읽은 데이터를 JSON 형태로 역직렬화(deserialization)해주면 원본의 데이터를 그대로 얻을 수 있다.
배열형 데이터를 로컬 스토리지에 저장할 때도 동일한 방법으로 문제를 예방할 수 있다.
localStorage.setItem('nums', JSON.stringify([1, 2, 3]));
JSON.parse(localStorage.getItem('nums')); // [1, 2, 3]