브라우저 저장소 : 로컬 스토리지, 세션 스토리지, 쿠키

---

1. 들어가며

브라우저 로컬 스토리지를 이용해 검색어 자동 저장 기능을 만들면서 브라우저 저장소 개념 정리

1.2 브라우저 저장소 이해하기

웹 애플리케이션을 개발하거나 사용하는 동안, 데이터를 저장하고 유지하는 것은 필수적인 기능 중 하나입니다. 브라우저는 사용자의 데이터를 클라이언트 측에 저장할 수 있는 몇 가지 옵션을 제공합니다. 이 글에서는 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage), 그리고 쿠키(Cookie)에 대해 살펴보겠습니다.

---

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

로컬 스토리지는 사용자의 브라우저에 영구적으로 데이터를 저장할 수 있는 WebAPI입니다. 이 데이터는 브라우저나 탭을 닫아도 유지되며, 심지어 컴퓨터를 다시 시작해도 사라지지 않습니다. 로컬 스토리지는 보통 사용자 설정, 즐겨찾기 정보, 상태 유지 정보 등을 저장하는 데 유용합니다.

2.1 로컬 스토리지의 특징

• 영구적 데이터 저장  : 삭제되지 않는 한 데이터를 영구적으로 유지할 수 있습니다.
• 브라우저 기반  : 도메인 단위로 데이터를 관리하며, 동일한 도메인에서 접근할 수 있습니다. 도메인이 다른 웹 페이지 간에는 데이터를 공유할 수 없습니다.
• 보안 고려사항  : 민감한 데이터를 로컬 스토리지에 저장하면 브라우저가 해킹당했을 때 데이터 유출 위험이 있습니다. 따라서 로그인 토큰이나 비밀번호 등 중요한 데이터는 로컬 스토리지에 저장하지 말아야 합니다.

2.2 로컬 스토리지의 장점

• 데이터를 오래 유지할 수 있으며, 재방문 시에도 사용자 맞춤형 환경을 제공할 수 있습니다.
• JSON 형태의 구조적 데이터를 저장할 수 있어 데이터 구조화에 용이합니다.

2.3 로컬 스토리지의 단점

• 보안 위험  : 스크립트를 통해 클라이언트가 쉽게 접근할 수 있기 때문에, 중요한 데이터를 저장하는 것은 피해야 합니다.
• 동기식 처리  : 로컬 스토리지는 동기적으로 작동하여, 큰 데이터를 저장하거나 가져오는 과정에서 성능 저하를 초래할 수 있습니다.

2.4 로컬 스토리지 예제

// 데이터 저장
localStorage.setItem('name', 'junu');

// 데이터 가져오기
let theme = localStorage.getItem('name');
console.log(name); // 'junu'

// 데이터 삭제
localStorage.removeItem('name');

// 모든 데이터 삭제
localStorage.clear();

---

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

세션 스토리지는 현재 브라우저 탭이 유지되는 동안만 데이터를 저장합니다. 즉, 사용자가 탭이나 창을 닫으면 데이터는 삭제됩니다. 세션 스토리지는 주로 특정 세션 내에서만 필요한 데이터를 저장하는 데 사용되며, 쇼핑 카트 정보나 일시적인 사용자 활동 추적 등에 유용합니다.

3.1 세션 스토리지의 특징

• 세션 기반 데이터 저장  : 탭을 닫으면 데이터가 삭제되며, 각 탭에 독립적으로 적용됩니다.
• 브라우저 종료 시 데이터 삭제  : 세션이 종료되면 데이터가 사라집니다.
• 탭 간 독립성  : 서로 다른 탭에서 같은 페이지를 열어도 세션 데이터는 서로 공유되지 않으며, 각각 독립된 세션을 유지합니다.

3.2 세션 스토리지의 장점

• 짧은 기간 동안의 데이터를 안전하게 저장할 수 있습니다.
• 복잡한 로그인이나 상태 관리를 필요로 하지 않는 간단한 웹 애플리케이션에서 유용합니다.

3.3 세션 스토리지의 단점

• 데이터가 브라우저 세션이 끝나면 삭제되므로, 영구적인 데이터 저장에는 적합하지 않습니다.
• 동기식이므로, 많은 양의 데이터를 처리할 때 성능 문제가 발생할 수 있습니다.

3.4 세션 스토리지 예제

// 데이터 저장
sessionStorage.setItem('cart', JSON.stringify(['item1', 'item2']));

// 데이터 가져오기
let cart = JSON.parse(sessionStorage.getItem('cart'));
console.log(cart); // ['item1', 'item2']

// 데이터 삭제
sessionStorage.removeItem('cart');

// 모든 데이터 삭제
sessionStorage.clear();

---

4. 쿠키 (Cookies)

쿠키는 브라우저에 저장할 수 있는 소량의 데이터로, 주로 서버와 클라이언트 간의 상태 정보를 주고받는 데 사용됩니다. 쿠키는 세션 유지, 사용자 인증, 추적 등에 유용하며, 브라우저는 HTTP 요청 시마다 서버에 쿠키를 자동으로 전송합니다.

4.1 쿠키의 특징

• 서버와 클라이언트 간 자동 전송 : 쿠키는 서버에 의해 설정될 수 있으며, 클라이언트가 HTTP 요청을 할 때마다 자동으로 서버에 쿠키가 포함되어 전송됩니다.
• 만료 시간 설정 가능 : 쿠키는 설정에 따라 만료 시간(예: 7일, 1년 등)을 지정할 수 있으며, 만료 시간이 지나면 자동으로 삭제됩니다.
• 보안 옵션  : Secure 속성을 사용하면 HTTPS를 통해서만 쿠키가 전송되며, HttpOnly 옵션을 설정하면 자바스크립트에서 접근할 수 없습니다.

4.2 쿠키의 장점

• 쿠키는 서버와의 세션 상태 유지를 위해 가장 흔하게 사용됩니다.
• 만료 시간과 도메인을 설정하여 다양한 용도로 쿠키를 관리할 수 있습니다.

4.3 쿠키의 단점

• 용량 제한  : 쿠키는 최대 4KB의 데이터를 저장할 수 있습니다.
• 보안 위험  : HTTP를 통해 쿠키가 전송될 경우, 공격자가 가로챌 수 있습니다. HTTPS 및 Secure, HttpOnly 옵션을 사용하여 보안을 강화해야 합니다.

4.4 쿠키 예제

// 쿠키 설정 (쿠키 만료 시간 설정 가능)
document.cookie = "username=seoring; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 쿠키 가져오기
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
let username = getCookie('username');
console.log(username); // 'seoring'

// 쿠키 삭제 (만료 시간으로 삭제)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

---

5. 로컬 스토리지 vs 세션 스토리지 vs 쿠키: 차이점 비교

구분	로컬 스토리지	세션 스토리지	쿠키
데이터 유지 기간	영구적	세션 동안	설정한 만료 시간까지
용량	5MB	5MB	4KB
주 용도	사용자 설정 저장	일시적인 세션 데이터	인증 정보, 사용자 세션 관리
서버와의 통신	통신 없음	통신 없음	요청 시마다 서버로 전송
보안	HTTPS가 아닌 경우 위험	HTTPS가 아닌 경우 위험	HTTPS, Secure, HttpOnly 사용 가능

---

6. 스토리지 사용 시 보안 고려 사항

스토리지를 사용할 때 보안은 매우 중요한 요소입니다. 다음은 브라우저 스토리지 사용 시 고려해야 할 보안 팁입니다.

• 민감한 데이터 저장 금지 : 로컬 스토리지나 세션 스토리지에 민감한 정보(예: 비밀번호, 신용카드 정보 등)를 저장하지 않도록 주의하세요.
• HTTPS 사용 : HTTPS를 통해 통신하면 데이터 전송 중에 가로채는 것을 방지할 수 있습니다.
• 쿠키 보안 속성 설정 : Secure 및 HttpOnly 속성을 사용하여 쿠키를 보호할 수 있습니다.

---

7. 마무리

이 글에서는 브라우저 스토리지의 기본 개념부터 실제 사용법, 보안에 이르기까지 자세히 살펴보았습니다. 각 스토리지의 장단점을 이해하고, 적절한 용도를 선택하여 효율적인 웹 애플리케이션을 개발할 수 있기를 바랍니다.

---