로컬 스토리지와 세션 스토리지
로컬 스토리지와 세션 스토리지는 HTML5에서 새로 추가된 저장소이다. 간단한 키(key)와 값(value)을 저장할 수 있다. 키-값 스토리지의 형태이다.
로컬 스토리지와 세션 스토리지의 차이점
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 지속성이다. 로컬 스토리지의 데이터는 사용자가 임의로 지우지만 않으면 계속 브라우저에 남아 있다. 반면 세션 스토리지의 데이터는 브라우저 탭을 닫는 순간 삭제된다. 지속적으로 필요한 데이터(자동 로그인)는 로컬 스토리지에 저장하고, 일시적으로 필요한 정보(비로그인 장바구니)는 세션 스토리지에 저장하면 된다. 따라서 비밀번호 같은 개인 정보는 세션 스토리지에 저장하면 안 된다. 클라이언트에 저장하는 방식이므로 정보 유출 위험이 있기 때문이다.
쿠키
쿠키는 로컬 스토리지와 세션 스토리지가 등장하기 전부터 브라우저에서 저장소 역할을 했다. 쿠키는 만료 기한이 있는 키-값 저장소이다.
document.cookie; // _ga=GAX.X.XXXXXXXXX; _gid=GAX.X.XXXXXXXXX; _gat=1
document.cookie를 입력하면 현재 쿠키 정보가 나온다. 쿠키는 4kb 용량 제한이 있고, 서버 요청 시마다 서버로 쿠키가 함께 전송된다. 왜 서버에 쿠키가 전송될까?
그걸 알기 위해서는 HTTP 요청에 대해 먼저 알아야 한다. HTTP 요청은 상태를 갖고 있지 않다. 그러니까 브라우저에서 서버로 나에 대한 정보를 가져오라는 GET /me라는 요청을 보낼 때, 서버는 요청 자체만으로는 그 요청이 누구에게서 오는지 알 수가 없다. 그래서 응답을 보낼 수가 없다. 이때 쿠키에 나에 대한 정보를 담아 서버로 보내면 서버는 쿠키를 읽어 내가 누군지 파악한다. 쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌으므로 서버로 계속 전송되는 것이다.
이 부분이 문제가 되기도 한다. 만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용한다. 4kb 중에는 서버에 필요하지 않은 데이터도 있다. 데이터 낭비가 발생하는 것이다. 바로 그런 데이터를 로컬 스토리지와 세션 스토리지에 저장할 수 있다.이 두 저장소의 데이터는 서버로 자동 전송되지 않는다.
두 스토리지는 모두 window 객체 안에 들어 있다. Storage 객체를 상속받기 때문에 메서드가 공통적으로 존재한다. 도메인별 용량 제한도 있다. (프로토콜, 호스트, 포트가 같으면 동일한 스토리지를 공유한다.) 브라우저나 기기에 따라 다르긴 하지만 모바일은 2.5mb, 데스크탑은 5~10mb라고 생각하면 된다. 용량이 적다고 생각할 수도 있지만 키-값만 저장하는 것이기 때문에 충분하다. 쿠키가 4kb라는 것을 생각하면 큰 편이다. 이게 부족하다면 기본적으로 50mb를 저장할 수 있는 IndexedDB도 존재한다.
로컬 스토리지
로컬 스토리지는 window.localStorage에 위치한다. 키-값 저장소이기 때문에 키와 값을 순서대로 저장하면 된다. 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환된다. 키도 문자열로 변환된다.
메서드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 된다. localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워진다.
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 메서드가 호출된 형태로 저장된다. [object 생성자]형으로 저장되는 것이다. 객체를 저장하려면 두 가지 방법이 있다. 그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있다. 한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 해야 한다. 객체 형식 그대로 문자열로 변환하는 것이다. 받을 때는 JSON.parse하면 된다.
localStorage.setItem('object', { a: 'b' });
localStorage.getItem('object'); // [object Object]
이렇게 데이터가 지워지기 전까지는 계속 저장되어 있기 때문에 유저 커스터마이제이션에 좋을 것 같다. 보안에 덜 민감한 사용자 설정이나 각종 데이터를 넣어두면 된다.
localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }
세션 스토리지
세션 스토리지는 window.sessionStorage에 위치한다. clear, getItem, setItem, removeItem, key 등 모든 메서드가 같다. 단지 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐이다.
