바닐라 JS로 간단한 프로젝트를 진행하던 도중, 로그인 정보를 어디에 저장해야할 지 생각해보는 시간을 갖게 되었다.

만약, React나 Svelte같은 프론트 기술을 사용했더라면, 쿠키와 전역 상태 저장 관리 라이브러리(Redux나 Svelte store 등)를 통해 토큰 값이나 로그인 정보를 저장했을 것 같다.

그렇다면, 바닐라 JS로 프론트를 구현할 시, 클라이언트는 데이터를 어디에다 저장해야 할까?
조사해본 결과, Web Storage와 Cookie가 있으며, Web Storage는 Local Storage와 Session Storage가 존재했다.

Web Storage

• 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 공간

Session Storage

• 각각의 출처(origin)에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공
• 최대 5MB까지 저장 가능

// Save data to sessionStorage
sessionStorage.setItem("key", "value");

// Get saved data from sessionStorage
let data = sessionStorage.getItem("key");

// Remove saved data from sessionStorage
sessionStorage.removeItem("key");

// Remove all saved data from sessionStorage
sessionStorage.clear();

Local Storage

• Session Storage와 비슷하지만, 브라우저를 닫았다 열어도 데이터가 남아 있음
• 최대 10MB까지 저장 가능
• 유효기간 없이 데이터를 저장
  • Javascript나 브라우저 캐시 또는 로컬 저장 데이터를 직접 지워야만 사라짐

localStorage.setItem("colorSetting", "#a4509b");

const color = localStorage.getItem("colorSetting");

localStorage.removeItem("myCat");

localStorage.clear();

Cookie

• 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각
• 최대 4KB까지 저장 가능
• 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있음
• 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용됨
  • 이를 이용하면 사용자의 로그인 상태를 유지할 수 있음
• 모든 요청마다 쿠키가 함께 전송되기 때문에, (특히 mobile data connections에서) 성능이 떨어지는 원인이 될 수 있으니, Web Storage API와 IndexedDB 사용을 추천

document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

// 특수 값(공백)은 인코딩 처리해 줘야 합니다.
let name = "my name";
let value = "John Smith"

// 인코딩 처리를 해, 쿠키를 my%20name=John%20Smith 로 변경하였습니다.
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

// 옵션은 key=value 뒤에 나열하고 ;로 구분합니다. 
document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

참조

• sessionStorage: https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage
• localStorage: https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
• 쿠키와 document.cookie: https://ko.javascript.info/cookie