쿠키와 웹 스토리지

쿠키

웹 개발에서 쿠키는 클라이언트 측에 저장되는 작은 데이터 조각으로, 주로 웹사이트가 사용자의 정보를 기억할 수 있도록 돕는다. 웹 서버는 쿠키를 설정하고, 웹 브라우저는 이를 클라이언트의 로컬 저장소에 저장한 후, 이후 동일한 웹사이트를 방문할 때마다 서버에 해당 데이터를 다시 전송한다. 쿠키는 사용자 인증, 세션 관리, 사용자 설정 저장 등 다양한 용도로 활용된다.

쿠키는 세션 쿠키와 영구 쿠키로 크게 나눌 수 있다. 세션 쿠키는 사용자가 브라우저를 종료할 때까지 유지되며, 브라우저를 닫으면 자동으로 삭제된다. 반면, 영구 쿠키는 만료일이 설정되어 있으며, 설정된 날짜까지 브라우저가 종료되어도 계속해서 저장된다.

 

쿠키는 이렇게나 유용하지만, 아쉽게도 몇 가지 제한 사항이 존재한다. 쿠키의 크기는 대체로 4KB로 제한되며, 이로 인해 저장할 수 있는 데이터의 양이 많지 않다. 또한 도메인 별로 저장할 수 있는 개수가 제한되어있다. 대체로 20~50개 정도이며 이를 초과하면 기존 쿠키가 삭제된다.

쿠키는 HTTP 요청마다 서버로 전송되므로 너무 많은 데이터를 저장하면 웹사이트의 성능에 영향을 줄 수 있다. 또한, 쿠키에는 중요한 정보가 포함될 수 있기 때문에, Secure와 HttpOnly와 같은 보안 속성을 설정하여 악의적인 접근을 방지하는 것이 필수적이다.

 

참고로 "쿠키"라는 용어는 웹 브라우저 프로그래머 루 몬툴리가 만들어냈다. 이는 유닉스 프로그래머들이 사용한, 프로그램이 수신 후 변경하지 않은 채로 반환하는 데이터의 패킷을 의미하는 매직 쿠키라는 용어에서 비롯된 것이다.

// 객체를 쿠키에 저장
const user = { name: "John", age: 30 };
document.cookie = "user=" + JSON.stringify(user);

// 쿠키에서 객체를 읽어오기
const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)user\s*=\s*([^;]*).*$)|^.*$/, "$1");
const userObj = JSON.parse(cookieValue);
console.log(userObj);  // { name: "John", age: 30 }

 

 

웹 스토리지

웹 스토리지는 클라이언트 측에서 데이터를 저장하고 관리할 수 있는 기능으로. 쿠키와 마찬가지로 웹 스토리지 역시 문자열만 저장할 수 있다. 따라서 객체나 배열과 같이 복잡한 데이터를 저장하고자 한다면 JSON.stringify()로 직렬화하여 저장하고, JSON.parse()로 역직렬화하여 사용할 수 있다.

웹 스토리지는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)라는 두 가지 주요 방식으로 데이터를 보관한다. 로컬 스토리지는 브라우저를 닫아도 데이터가 유지되며, 도메인이 같다면 세션 간에 데이터가 공유된다. 반면에 세션 스토리지는 세션이 끝나면 데이터가 종료되며, 단일 세션에서만 데이터가 유효하다.

웹 스토리지의 주요 장점은 데이터 저장 용량이 쿠키에 비해 훨씬 크다는 점이다. 쿠키는 약 4KB의 데이터를 저장할 수 있지만, 웹 스토리지는 일반적으로 5MB까지 저장할 수 있다. 또한, 웹 스토리지에 저장된 데이터는 HTTP 요청에 포함되지 않기 때문에 네트워크 성능에 영향을 미치지 않는다. 그러나, 웹 스토리지는 보안 측면에서 쿠키보다 취약할 수 있으니 암호화 등을 사용하는 등 각별히 신경써야한다.

// 객체를 로컬 스토리지에 저장
const user = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

// 객체를 세션 스토리지에 저장
const user = { name: "John", age: 30 };
sessionStorage.setItem("user", JSON.stringify(user));

// 로컬 스토리지에서 객체 읽어오기
const localStorageValue = localStorage.getItem("user");
const userObj = localStorageValue ? JSON.parse(localStorageValue) : null;
console.log(userObj);  // { name: "John", age: 30 }

// 세션 스토리지에서 객체 읽어오기
const sessionStorageValue = sessionStorage.getItem("user");
const userObj = sessionStorageValue ? JSON.parse(sessionStorageValue) : null;
console.log(userObj);  // { name: "John", age: 30 }

 

로컬 스토리지나 세션 스토리지에 저장된 데이터가 변경될 때마다 storage 이벤트가 트리거 된다.  이 이벤트는 같은 도메인에서 열린 다른 탭이나 창에서 발생한 스토리지 변경을 실시간으로 감지할 수 있는 강력한 방법을 제공한다. 예를 들어, 한 탭에서 로컬 스토리지에 데이터를 변경하면, 다른 탭에서는 storage 이벤트를 통해 해당 변경 사항을 받아들이고 처리할 수 있다. 이를 통해 여러 탭 간의 상태를 동기화하거나, 하나의 탭에서 발생한 변경을 다른 탭에서 자동으로 반영하는 등의 동작을 구현할 수 있다.

window.addEventListener('storage', function(event) {
  if (event.key === 'theme') {
    updateTheme();
  }
});