서론
웹 서핑을 하다보면 아래 사진처럼 쿠키(cookie)와 관련된 설정을 하라는 배너를 볼 때가 있다.
쿠키(cookie)의 개념과 웹 스토리지(Web Storage)의 등장 배경
쿠키란 웹 서버가 브라우저에게 주로 "사용자를 식별할 데이터"를 저장하라고 건네주는 그릇 같은 것이다.
브라우저는 쿠키에 로그인 정보, 기본 언어 등 여러 설정에 관한 데이터들을 저장해 놓았다가, 해당 서버에 접속하여 정보를 요청할 때 쿠키를 다시 전송한다.
이처럼 쿠키는 브라우저와 서버 간에 특정 데이터를 일정기간 유지할 수 있게 해준다.
그리고 그런 데이터를 서버에 저장하는 것이 아니라 클라이언트(브라우저)측에 저장하기 때문에 서버의 저장 공간을 절약할 수 있다는 것이 큰 장점이다.
하지만 쿠키는 다음과 같은 이유로 아쉬움이 있다.
- 모든 http 요청마다 쿠키가 함께 전송돼서 서버에 과부하를 준다.
- 데이터 저장 용량이 4kb가 한계이다.
- 유지 기간과 개수가 제한적이다.
그래서 HTML5 이후 쿠키를 보완한 웹 스토리지 API (Web Storage) 기능이 등장하였다.
웹 스토리지(Web Storage)란?
웹 스토리지는 HTML5 이후 브라우저에서 제공하는 기능이며 window 객체를 상속받는다.
그리고 웹 스토리지 역시 중요 포인트는 클라이언트에서 서버로 데이터를 전송하여 실제 데이터베이스나 클라우드에 저장하는 것이 아닌 브라우저의 저장공간에 key : value 형태로 데이터를 저장한다는 것이다.
웹 스토리지의 장점
- 서버로 http 요청을 할때, 개발자가 데이터를 선택적으로 전송, 가공할 수 있다.
- 저장 최대 용량이 5mb까지로 늘었다.
- 시간 설정 기능이 없어서 시간에 제약이 없다.(그래서 만약 데이터를 삭제하려면 직접 관리해주어야한다.)
- JSON 형태를 활용해서 Javascript 객체를 저장할 수 있다.
- 내장기능을 활용할 수 있다.
웹스토리지의 종류
웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다.
두 스토리지의 차이점을 설명하기에 앞서 공통점으로는 모두 window 객체이고 Storage 객체를 상속받기 때문에 공통된 내장 기능을 사용한다는 점이 있다.
밑의 코드는 localStarage를 예시로 썼지만 sessionStorage 또한 같은 방식으로 작성한다.
Web storage의 기본 API
// 데이터 저장 ("key", "value")
localStorage.setItem("name", "John");
// 객체 데이터를 저장할때 - JSON을 활용해서 문자열로 변환 후 저장한다.
let arr = ["a", "b"];
localStorage.setItem("arr", JSON.stringify(arr));
// 데이터(value) 읽기
localStorage.getItem("name");
// 문자열로 저장된 객체 데이터를 배열로 다시 바꿔서 읽을때
JSON.parse(localStorage.getItem("arr"));
// 데이터 삭제
localStorage.removeItem("name");
// 데이터 전체 삭제
localStorage.clear()* 로컬 스토리지
- 스토리지에 도메인별로 저장된 값을 삭제하기 전까지는 브라우저에 계속 남아있다.
- 같은 도메인 기준으로 여러 탭(세션) 사이에서 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 계속 남아 있다.
- 하지만 이러한 로컬 스토리지는 동일한 기기에서 동일한 브라우저를 사용할 때만 적용된다.
- 브라우저 탭과 로그인/로그아웃에 상관없이 유지되고, 페이지를 닫았다 다시 켜도 남아있길 원하는 데이터들을 로컬 스토리지에 저장한다.
* 세션 스토리지
- 세션 스토리지에 담긴 데이터는 세션이 종료될 때까지만 지속된다.
- 브라우저에서 같은 웹사이트를 여러 탭, 창으로 볼때 모두 각각 별개의 세션 스토리지에 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 사라진다.
// storage.html 파일에 두 개의 스토리지 데이터를 저장했다.
localStorage.setItem("name1", "John");
sessionStorage.setItem("name2", "Mike");
// 그리고 storage2.html에서 두 개의 스토리지의 저장된 데이터를 console에 출력하려한다.
console.log(localStorage.getItem("name1")); // John 출력
console.log(sessionStorage.getItem("name2")); // Mike 출력
// 그러나 새 창(다른 세션)에서 storage2.html을 열어 확인해보면 세션스토리지에 저장된 데이터는 null이 된다.
console.log(sessionStorage.getItem("name2")); // null마무리
웹 스토리지는 좋은 기능이지만 기존의 쿠키처럼 보안에 취약한 단점이 있다. 그래서 보안상 중요한 정보인 비밀번호 등에는 사용되지 않고, 비교적 덜 중요한 정보에 사용된다.
예를들어 사용자가 글을 쓰거나 form에 입력하다가 창이 꺼져도 작성하던 내용을 복구할 수 있게 해주고,
열람한 글들의 히스토리 저장, 웹페이지의 기본 설정 세팅 등 다양한 활용법이 있다.
끝으로 공부를 하면서 서버의 데이터베이스, 클라우드, 브라우저 속의 스토리지 등 데이터를 어디에 저장하는냐에 따라 애플리케이션의 효율성이 달라진다는 점을 배웠다.
데이터의 흐름, 공간? 명확히 표현하긴 힘들지만 데이터의 움직임에 대해서 배워보고 싶은 생각이 든다.
그리고 웹 스토리지가 쿠키를 보완하기 위해 나온 기능이지만 아직까지 많은 웹 서버에서 쿠키를 제공하는 하는 이유와 세션, 토큰의 개념에 대해서도 더 알아보려한다.
참조 링크
