[JS] 브라우저 저장소 (LocalStorage, SessionStorage, Cookie

 

웹 스토리지 (Web Storage) 

웹 스토리지란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아닌 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능입니다.

 

웹 스토리지의 개념은 Key - Value 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴입니다.

웹 스토리지는 영구 저장소 (LocalStroage) 임시 저장소 (SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다.

 

웹 스토리지는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한되어, A도메인에 저장한 데이터는 B도메인에서 조회할 수 없습니다.

 

웹 스토리지가 필요한 이유

쿠키와 웹 스토리지 모두 브라우저에 저장되지만 쿠키의 단점을 웹 브라우저를 사용함으로써 극복할 수 있습니다.

 

쿠키의 단점

1. 4KB의 데이터 저장 제한
2. HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다.
3. 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.

웹 스토리지의 장점 및 쿠키와의 비교

1. 웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함해 서버로 전송된다. WebStorage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지 않는다. 이는 네트워크에 트래픽 비용을 줄여준다.
2. 웹 스토리지는 단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다. 이는 개발 편의성을 제공해주는 장점이다.
3. 웹 스토리지는 용량 제한이 없지만, 쿠키는 개수와 용랑의 제한이 있다. 클라이언트에 최대 300개의 쿠키를 저장할 수 있으며, 하나의 사이트(도메인)에서는 최대 20개를 저장할 수 있다. 또한, 하나의 쿠키값은 최대 4KB로 제한되지만 웹 스토리지는 제한이 없다. 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수 있으나, 대용량으로 쿠키를 저장할 일은 없다.
4. 웹 스토리지는 영구 저장이 가능하지만 쿠키는 만료일자를 지정하게 되어있어 언젠가 제거된다. 만료일자를 지정하지 않은 쿠키가 세션쿠키가 된다. 만일 영구 쿠키를 원하면 만료일자를 굉장히 멀게 설정하여 해결이 가능하다. 웹 스토리지는 만료기간 설정이 없기 때문에 저장한 데이터는 영구 저장이 된다.

세션 쿠키 (Session Cookie)

 

활성 웹 브라우저 세션이 있는 기간동안 저장된다. 세션쿠키는 일반적으로 웹 브라우저를 닫을 때 삭제된다.

 

영구쿠키 / 지속적쿠키 (Persistent Cookie)

 

각 쿠키에 지정된 기간동안 또는 장치에 쿠키를 수동으로 삭제할 때까지 장치에 남아있는다.

 

웹 스토리지의 종류

1. 로컬 스토리지 (LocalStorage)

로컬 스토리지는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능합니다.
또한 도메인마다 별도로 로컬 스토리지가 생성이 된다는 것입니다. Window 전역 객체의 LocalStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

특징: 브라우저를 종료해도 데이터는 보관되어 다음번에 접속해도 그 데이터를 사용할 수 있어 자동 로그인 기능에 많이 쓰입니다.
장점: 서버에 불필요한 데이터를 저장을 안 하고, 용량이 크다.
단점: HTML4만 지원되는 브라우저에는 지원이 안된다.

localStorage.setItem("access_token", "name"); // 저장
localStorage.getItem("access_token"); // 조회 : Jintae
localStorage.removeItem("access_token"); // access_token 으로 설정된 키로 접근하여 삭제
localStorage.clear(); // 전체 삭제

2. 세션 스토리지 (SessionStorage)

세션 스토리지는 세션 종료 시 (브라우저를 닫을 경우) 클라이언트에 대한 정보가 삭제된다.
세션 스토리지는 Window 전역 객체의 세션 스토리지라는 컬렉션을 통해 저장/조회가 이루어진다.

특징: 데이터가 지속적으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 성질이 비슷한데, 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 데이터가 유지된다. 일회성 로그인기능에 많이 쓰입니다.
장점: 서버에 불필요한 데이터를 저장을 안 하고, 용량이 크다
단점: HTML4만 지원되는 브라우저에는 지원이 안된다. 또한 브라우저를 닫을 경우 데이터가 자동으로 삭제된다.

sessionStorage.setItem("access_token", "name"); // 저장
sessionStorage.getItem("access_token"); // 조회 : Jintae
sessionStorage.removeItem("access_token")l // access_token 으로 설정된 키로 접근하여 삭제
sessionStorage.clear(); // 전체 삭제