[JS] 웹 스토리지(LocalStorage / Sesstion Storage) 활용 및 차이 feat.cookie

 

 

웹 스토리지(LocalStorage / Sesstion Storage) 활용 및 차이  feat.cookie

웹 애플리케이션을 개발하다 보면 사용자 데이터를 클라이언트 측에 저장해야 하는 상황이 자주 발생합니다. 과거에는 쿠키(Cookie)가 유일한 선택지였지만, HTML5의 등장과 함께 웹 스토리지(Web Storage) API가 도입되었고, 이는 localStorage와 sessionStorage라는 두 가지 메커니즘을 제공합니다.

두 스토리지 방식은 얼핏 비슷해 보이지만, 중요한 차이점들이 있어 상황에 맞게 적절히 선택해야 합니다. 오늘은 localStorage와 sessionStorage의 개념, 차이점, 그리고 어떤 상황에서 각각을 사용해야 하는지 알아보겠습니다.

---

목차

1. 웹 스토리지란?
2. localStorage 개념과 특징
3. sessionStorage 개념과 특징
4. localStorage vs sessionStorage 주요 차이점
5. localStorage 적합한 사용 상황
6. sessionStorage 적합한 사용 상황
7. 웹 스토리지 보안 고려사항
8. 브라우저 호환성과 제한사항
9. 웹 스토리지 vs 쿠키: 언제 무엇을 사용해야 할까?

---

웹 스토리지란?

웹 스토리지(Web Storage)는 HTML5에서 도입된 클라이언트 측 데이터 저장 메커니즘으로, 브라우저에서 키-값 쌍의 데이터를 저장할 수 있게 해주는 API입니다. 웹 스토리지는 쿠키의 여러 한계점을 극복하기 위해 설계되었으며, 주요 장점으로는 다음과 같은 것들이 있습니다:

• 더 많은 저장 공간: 쿠키가 일반적으로 4KB로 제한되는 반면, 웹 스토리지는 브라우저에 따라 5MB에서 10MB까지 제공합니다.
• 서버 통신 없음: 웹 스토리지 데이터는 HTTP 요청 시 서버로 자동 전송되지 않습니다.
• 간단한 API: 사용하기 쉬운 API를 제공합니다.
• 구조화된 데이터 저장 가능: JSON 문자열로 변환하여 객체 형태의 데이터도 저장할 수 있습니다.

웹 스토리지는 localStorage와 sessionStorage 두 가지 메커니즘을 통해 구현되며, 이 두 메커니즘은 동일한 API를 공유하지만 데이터 지속성과 범위에서 중요한 차이가 있습니다.

---

localStorage 개념과 특징

localStorage는 브라우저에 데이터를 영구적으로 저장할 수 있는 메커니즘입니다. 다음과 같은 주요 특징을 가지고 있습니다:

주요 특징

1. 영구 저장: 사용자가 명시적으로 삭제하지 않는 한, 브라우저나 운영체제가 업데이트되더라도 데이터가 유지됩니다.
2. 오리진 기반 접근: 같은 오리진(프로토콜, 호스트, 포트의 조합)을 가진 모든 페이지는 동일한 localStorage 데이터에 접근할 수 있습니다.
3. 동기적 작동: localStorage 작업은 동기적으로 작동하기 때문에, 대량의 데이터를 처리할 때 성능 이슈가 발생할 수 있습니다.
4. 문자열 기반 저장: 모든 값은 문자열로 저장되므로, 객체나 배열 등의 복잡한 데이터 구조를 저장하려면 JSON.stringify()를 사용해 문자열로 변환한 후 저장해야 합니다.

기본 작동 방식

• localStorage는 window.localStorage 객체를 통해 접근합니다.
• 데이터 저장, 읽기, 삭제 등의 작업을 위한 간단한 메소드를 제공합니다.
• 데이터는 키-값 쌍 형태로 저장됩니다.

---

sessionStorage 개념과 특징

sessionStorage는 세션 기간 동안만 데이터를 저장하는 메커니즘입니다. localStorage와 API는 동일하지만, 다음과 같은 고유한 특징을 갖고 있습니다:

주요 특징

1. 세션 기반 저장: 데이터는 페이지 세션 동안만 유지됩니다. 세션은 페이지가 열려있는 동안 계속되며, 페이지를 새로고침해도 데이터는 유지됩니다. 하지만 탭이나 브라우저를 닫으면 데이터는 삭제됩니다.
2. 탭/창 격리: 같은 페이지라도 다른 탭이나 창에서 열면 각각 별도의 sessionStorage가 생성됩니다. 즉, 동일한 URL이라도 다른 탭에서는 서로 다른 sessionStorage를 갖습니다.
3. 오리진 기반 접근: localStorage와 마찬가지로 같은 오리진을 가진 페이지만 동일한 sessionStorage에 접근할 수 있습니다.
4. 문자열 기반 저장: localStorage와 마찬가지로 모든 값은 문자열로 저장됩니다.

기본 작동 방식

• sessionStorage는 window.sessionStorage 객체를 통해 접근합니다.
• localStorage와 동일한 API 메소드를 사용합니다.
• 브라우저 탭/창을 닫으면 데이터가 완전히 제거됩니다.

---

localStorage vs sessionStorage 주요 차이점

두 스토리지 메커니즘의 핵심 차이점을 표로 정리하면 다음과 같습니다:

	localStorage	sessionStorage
데이터 지속성	영구적 (명시적으로 삭제하기 전까지)	세션 기간 동안만 (탭/창을 닫으면 삭제)
범위	동일 오리진의 모든 창/탭	동일 오리진의 같은 탭/창 내에서만
용량 제한	일반적으로 5MB~10MB	일반적으로 5MB~10MB
API	localStorage.getItem(), setItem(), removeItem(), clear(), key()	sessionStorage.getItem(), setItem(), removeItem(), clear(), key()
데이터 공유	같은 오리진의 모든 페이지 간 공유	같은 오리진의 같은 탭/창 내에서만 공유
브라우저 세션	브라우저를 닫고 다시 열어도 데이터 유지	브라우저 세션 종료 시 데이터 삭제
네트워크 트래픽	HTTP 요청에 포함되지 않음	HTTP 요청에 포함되지 않음

---

localStorage 적합한 사용 상황

localStorage는 다음과 같은 상황에서 특히 유용합니다:

1. 사용자 환경설정 저장: 테마 선택, 언어 설정, 레이아웃 옵션 등 사용자의 개인화된 설정을 저장할 때 적합합니다.
2. 자동 로그인 정보 저장: 자동 로그인을 위한 토큰(단, 민감한 정보는 보안상의 이유로 피해야 함)이나 사용자 ID를 저장할 때 사용할 수 있습니다.
3. 장바구니 정보: 사용자가 쇼핑몰에서 장바구니에 담은 아이템을 세션 간에도 유지하고 싶을 때 유용합니다.
4. 오프라인 데이터 캐싱: 오프라인 상태에서도 애플리케이션이 작동할 수 있도록 데이터를 캐싱할 때 사용됩니다.
5. 폼 데이터 자동 저장: 긴 폼을 작성 중인 사용자가 실수로 페이지를 닫았다가 다시 방문해도 입력 중이던 데이터를 복구할 수 있습니다.
6. 방문 기록: 사용자의 이전 방문 기록이나 행동 패턴을 저장하여 개인화된 경험을 제공할 때 적합합니다.

---

sessionStorage 적합한 사용 상황

sessionStorage는 다음과 같은 상황에서 특히 유용합니다:

1. 임시 폼 데이터: 폼 작성 중 임시 데이터를 저장하되, 세션이 끝나면 삭제해야 할 때 적합합니다.
2. 단일 페이지 애플리케이션(SPA)의 상태 관리: 페이지 새로고침 시에도 현재 뷰의 상태를 유지하고 싶을 때 사용할 수 있습니다.
3. 탭별 독립적인 데이터 관리: 같은 웹 애플리케이션을 여러 탭에서 독립적으로 사용할 때, 각 탭의 상태를 분리하여 관리하고 싶은 경우에 적합합니다.
4. 다단계 프로세스의 임시 데이터: 여러 단계로 이루어진 프로세스(예: 결제 과정)에서 임시 데이터를 저장할 때 유용합니다.
5. 민감한 임시 데이터: 세션이 끝나면 자동으로 삭제되어야 하는 비교적 민감한 임시 데이터를 저장할 때 적합합니다.
6. 브라우저 새로고침 후에도 유지되어야 하는 UI 상태: 페이지 새로고침 후에도 스크롤 위치, 탭 선택 상태 등을 유지하고 싶을 때 사용할 수 있습니다.

---

웹 스토리지 보안 고려사항

웹 스토리지를 사용할 때 반드시 고려해야 할 보안 사항들이 있습니다:

1. 민감한 정보 저장 금지: 패스워드, 신용카드 정보, 개인식별정보 등 민감한 데이터, 웹 스토리지는 암호화되지 않은 상태로 클라이언트에 저장되며, XSS(Cross-Site Scripting) 공격에 취약할 수 있습니다.
2. XSS 취약성: 웹 스토리지는 JavaScript를 통해 접근 가능하므로, XSS 공격으로 데이터가 노출될 위험이 있습니다. 사용자 입력 데이터를 저장할 때는 항상 적절한 검증과 이스케이핑을 수행해야 합니다.
3. CSRF 방어: localStorage나 sessionStorage 자체는 CSRF(Cross-Site Request Forgery) 공격에 직접적으로 취약하지 않지만, 저장된 정보를 활용한 2차 공격 가능성이 있으므로 주의해야 합니다.
4. 오리진 제한: 웹 스토리지는 동일 오리진 정책을 따르기 때문에, 서로 다른 오리진 간에는 데이터가 공유되지 않습니다. 이는 보안 측면에서 좋지만, 필요한 경우 대안을 고려해야 합니다.
5. 제3자 라이브러리 주의: 제3자 라이브러리나 스크립트가 웹 스토리지에 접근할 수 있으므로, 신뢰할 수 있는 라이브러리만 사용해야 합니다.

---

브라우저 호환성과 제한사항

웹 스토리지는 대부분의 현대 브라우저에서 지원되지만, 몇 가지 제한사항이 있습니다:

1. 용량 제한:
   • 대부분의 최신 브라우저는 도메인당 5MB~10MB의 저장 공간을 제공합니다.
   • Chrome, Firefox, Safari: 일반적으로 5MB
2. 문자열 타입 제한:
   • 모든 키와 값은 문자열 형태로 저장됩니다.
   • 객체나 배열을 저장하려면 JSON.stringify()를 사용해 변환해야 합니다.
   • 불리언, 숫자 등의 원시 값도 문자열로 자동 변환됩니다.
3. 동기적 작동:
   • 웹 스토리지 API는 동기적으로 작동하여 대량의 데이터 처리 시 메인 스레드를 차단할 수 있습니다.
4. 오래된 브라우저:
   • IE 7 이하 버전은 웹 스토리지를 지원하지 않습니다.
   • 일부 오래된 모바일 브라우저에서도 지원이 제한적일 수 있습니다.

 

---

쿠키 참고 이미지

 

웹 스토리지 vs 쿠키: 언제 무엇을 사용해야 할까?

웹 스토리지와 쿠키는 각각 다른 용도와 특성을 가지고 있습니다. 다음은 적절한 사용 상황에 대한 가이드입니다:

 

쿠키를 사용해야 하는 경우:

• 서버 측에서 데이터에 접근해야 하는 경우 (쿠키는, 웹 스토리지와 달리, HTTP 요청과 함께 서버로 전송됨)
• 오래된 브라우저 지원이 필요한 경우
• 서버 세션 관리 목적인 경우 (세션 쿠키)
• 서드파티 통합이 필요한 경우 (예: 광고 트래킹)

localStorage를 사용해야 하는 경우:

• 장기간 저장이 필요한 비민감성 클라이언트 데이터
• 서버로 자동 전송되지 않아야 하는 데이터
• 비교적 큰 용량(5MB 이상)의 데이터
• 다양한 탭/창에서 공유되어야 하는 데이터

sessionStorage를 사용해야 하는 경우:

• 단일 탭/창 내에서만 필요한 임시 데이터
• 세션이 끝나면 자동으로 삭제되어야 하는 데이터
• 여러 탭에서 동일한 앱을 실행할 때 독립적인 상태 관리가 필요한 경우
• 페이지 새로고침 후에도 유지되어야 하지만, 브라우저를 닫으면 삭제되어야 하는 데이터

---

용어 설명

웹 스토리지를 이해하는 데 도움이 될 수 있는 중요한 용어들을 정리했습니다:

• 오리진(Origin): 프로토콜(http, https), 호스트(도메인), 포트의 조합. 웹 스토리지는 오리진별로 격리되어 있습니다.
• 키-값 쌍(Key-Value Pair): 데이터를 저장하는 형식으로, 고유한 식별자(키)와 그에 연결된 데이터(값)의 조합입니다.
• 세션(Session): 사용자가 웹사이트를 방문해서 떠날 때까지의 일련의 상호작용 기간을 의미합니다. 브라우저 탭/창이 열려있는 동안 지속됩니다.
• 지속성(Persistence): 데이터가 얼마나 오래 유지되는지를 나타내는 특성입니다. localStorage는 영구적 지속성을, sessionStorage는 세션 지속성을 갖습니다.
• XSS(Cross-Site Scripting): 웹사이트에 악성 스크립트를 삽입하여 사용자의 브라우저에서 실행되게 하는 공격 방식입니다. 웹 스토리지는 XSS 공격에 취약할 수 있습니다.
• 동일 출처 정책(Same-Origin Policy): 웹 보안의 중요한 개념으로, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호작용하는 방식을 제한합니다.
• 쿼터(Quota): 브라우저가 웹 스토리지에 할당하는 최대 저장 용량을 의미합니다.

---

 

 

https://covelope.tistory.com/entry/CORS%EA%B5%90%EC%B0%A8-%EC%B6%9C%EC%B2%98-%EB%A6%AC%EC%86%8C%EC%8A%A4-%EA%B3%B5%EC%9C%A0-%EA%B0%9C%EB%85%90-%ED%95%84%EC%9A%94%EC%84%B1-%EB%B3%B4%EC%95%88-%EB%B0%8F-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

CORS(교차 출처 리소스 공유): 개념, 필요성, 보안 및 해결 방법

 

https://covelope.tistory.com/entry/%ED%98%BC%ED%95%A9-%EC%BD%98%ED%85%90%EC%B8%A0Mixed-Content-%EC%9B%90%EC%9D%B8%EA%B3%BC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

혼합 콘텐츠(Mixed Content): 원인과 해결 방법

 

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

Web Storage API - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/Cookies