localStorage와 sessionStorage는 브라우저에서 제공하는 클라이언트 측 저장소 API로, 둘 다 데이터를 키-값 쌍 형태로 저장합니다.
차이점은 데이터의 지속성과 범위에 있습니다.
localStorage는 데이터를 영구적으로 저장합니다. 브라우저를 닫거나 장치를 재부팅해도 데이터가 유지되며, 동일한 도메인 내의 모든 탭에서 데이터를 공유할 수 있습니다.
사용 예로는 다크모드 같은 테마 설정이나 장바구니 데이터와 같이 장기적으로 유지해야 하는 데이터 저장에 적합합니다.
sessionStorage는 데이터가 현재 브라우저 세션 동안만 유지되며, 브라우저 탭이나 창을 닫으면 데이터가 삭제됩니다. 또한, 같은 도메인이라도 탭 간에는 데이터를 공유하지 않습니다.
사용 예로는 로그인 후 인증 데이터를 일시적으로 저장하거나, 특정 탭에서만 사용할 데이터를 관리하는 데에 있습니다.
결론적으로, localStorage는 장기 데이터 저장에, sessionStorage는 탭 단위로 데이터를 관리하거나 일시적인 데이터 저장에 적합합니다.
localStorage와 sessionStorage를 사용했을때 문제점은 없을까요? 🤔
localStorage와 sessionStorage 둘다 보안 관점에서는 주의가 필요합니다. localStorage에 민감한 데이터를 저장하면 영구적으로 유지되므로 보안 위험이 큽니다.
반대로, sessionStorage는 세션 종료 시 데이터가 자동 삭제되기 때문에 민감한 데이터를 임시 저장하는 데 더 적합하지만 여전히 보안적인 문제는 남아있습니다.
스토리지를 사용했을때 발생하는 보안 문제는 어떻게 해결할 수 있나요? 🧐
브라우저 저장소는 데이터를 암호화하거나 보호할 방법이 기본적으로 제공되지 않기 때문에 민감한 데이터를 직접 저장하지 않는 것이 가장 중요합니다.
그러므로 가장 직관적인 방법은 민감한 데이터는 스토리지에 저장하지 않는 것입니다.
인증 토큰이나 사용자 비밀번호는 localStorage 또는 sessionStorage에 저장하지 않고, HTTP-Only 쿠키를 사용합니다. 이렇게 하면 자바크스립트에서 접근할 수 없으므로 XSS 공격에 대한 위험을 줄일 수 있습니다.
'4차산업혁명의 일꾼 > 웹개발' 카테고리의 다른 글
Tanstack Query를 사용하는 이유를 설명해 주세요. (0) | 2025.04.30 |
---|---|
HTTP/1.1과 HTTP/2.0 (0) | 2025.04.30 |
프로세스보다 스레드의 컨텍스트 스위칭이 더 빠른 이유는 무엇인가요? (0) | 2025.04.29 |
useEffect를 이용하여 로딩 상태 관리하는 방법과 Suspense를 활용하는 방법에 대한 차이점을 설명해주세요. (0) | 2025.04.28 |
스케일 아웃과 스케일 업의 차이점을 설명해주세요 (0) | 2025.04.28 |