[Storage] 로컬 스토리지 / 세션 스토리지 / 쿠키

🤔 서론

그간 JS 미니프로젝트나 로그인 토큰의 경우 브라우저의 LocalStorage에 저장해왔다. (아무생각 없이..?)

하지만, 프로젝트를 진행하며 이메일 저장기능을 쿠키에 적용하기를 권장했고 우선 react-cookie로 이를 구현했다.

 

이번 기회로, 세션 스토리지까지 세 저장소의 차이점을 명확히 구분해보려고 한다. 이는, 추후 올바른 저장소 선정에 큰 도움이 되길 바란다.

---

📕 Web Storage

먼저, 스토리지를 Web Storage 와 Cookie로 분리할 수 있다. Web Storage는 Cookie의 단점을 보완하기 위해 HTML5 버전에 적용됬다.

이는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조로,

Session Storage(세션 스토리지), Local Storage(로컬 스토리지) 두 저장소가 바로 이 Web Storage에 속한다.

 

Web Storage에는 ([key], [value]) 쌍으로 데이터를 저장하며, 이 키값을 기반으로 데이터를 조회할 수 있다.

Web Storage가 Cookie에 비해 개선된 점은 1) 서버통신 불필요, 2) 큰 용량, 3) 클라이언트 정보가 서버에 미개입 이 세 가지를 꼽는다.

Cookie는 사이트당 최대 20개, 쿠키당 4KB 용량을 지원하나, Web Storage는 약 5MB까지 가능하다. (브라우저마다 다름!)

• Web Storage : 장점 (서버 불필요 API 통신 생략, 용량이 크다) / 단점 (HTML4만 지원되는 브라우저엔 적용 불가)
• Coockie : 장점 (거의 모든 브라우저에서 적용 가능, 만료기간 설정) / 단점 (API가 재호출되므로 서버부하 증가, 쿠키용량 작음)

 

1. Session Storage(세션 스토리지)

• 세션 스토리지는 한 세션에만 데이터를 저장하므로, 브라우저(or 탭, 앱)를 끄면 데이터가 사라진다.
• 클라이언트 사이드에서만 저장 가능함. 서버로 데이터 이전은 불가능함.
• 저장용량 : 약 5MB (브라우저마다 다름!)

- 사용법

// 저장
sessionStorage.A = 1;
sessionStorage.setItem("B", 2);

// 불러오기
sessionStorage.A;			// 1;
sessionStorage.getItem("B")		// 2;

* 이외에도, key() - 키 확인, removeItem() - 특정정보 삭제, clear() - 전체정보 삭제 등의 메서드를 지원한다.

 

- 적용

세션 스토리지는 브라우저 종료시 클라이언트에 대한 정보가 삭제되므로, 비회원 장바구니, 입력 폼 정보 등 저장에 주로 사용된다.

 

2. Local Storage(로컬 스토리지)

• 로컬 스토리지는 유통기한이 없다. 즉, 사용자가 지우기 전까지 데이터가 남아있다.
• Javascript 제어(clear() 메서드) 또는 브라우저 캐시 삭제 등을 통해서만 데이터 삭제가 가능함.
• 클라이언트 사이드에서만 저장 가능함.
• 저장용량 : Session Storage, Cookie 에 비해 저장공간이 가장 크다.

- 사용법

// 저장
localStorage.A = 1;
localStorage.setItem("B", 2);

// 불러오기
localStorage.A;			// 1;
localStorage.getItem("B")		// 2;

* 마찬가지로, key() - 키 확인, removeItem() - 특정정보 삭제, clear() - 전체정보 삭제 등의 메서드를 지원한다.

 

- 적용

로컬 스토리지는 클라이언트 정보를 영구저장하기 때문에, 자동 로그인 정보같은 내용을 주로 저장한다.

 

 

📕 Cookie

3. Cookie(쿠키)

• 쿠키는 다음에 이어질 Request 와 함께 서버로 보내지는 데이터를 저장한다.
• 보통 서버에서 데이터 만료기한을 세팅하고 관리한다. (React-cookie 라이브러리 등 활용하면 클라이언트 세팅도 가능)
• 클라이언트에서도 읽을 수 있지만, 보통 서버 사이드에서 읽는 데이터이다.
• 보안을 위해 httpOnly 플래그를 true로 설정하여 클라이언트에서 쿠키 접근을 방지할 수 있다.
• 저장용량 : 쿠키당 4KB 이하, 사이트당 최대 20개 쿠키

- 사용법

// 저장
setCookie("A", 1, 7)		// key: "A", Value: 1, 유효기간: "7초"

// 불러오기
getCookie("A")			// 1

 

- 적용

쿠키는 만료기한이 있기 때문에, "X일동안 보지 않기" 팝업창 등 설정에 적용된다.

---

Web Storage라는 개념도 이번 기회에 알게 되었고, 이것이 Cookie 보완을 위해 HTML5에서 등장한 차이점도 명확히 구분했다!

공부하고나니, 오히려 이메일 저장은 로컬스토리지, 로그인 토큰저장은 쿠키(만료기간이 긴?)로 돌리는 것이 좋겠다고 생각했다!! ✊✊

 

[출처]

- erwinousy 님의 블로그 : erwinousy.medium.com/%EC%BF%A0%ED%82%A4-vs-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-28b8db2ca7b2

- 마케팅걸 님의 블로그 : m.blog.naver.com/illumulus/221708536593  

- kler 님의 블로그 : velog.io/@kler/TIL4-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%BF%A0%ED%82%A4-%EC%A0%95%EB%A6%AC