본문 바로가기
웹 프로그래밍

[웹프로그래밍] 로컬스토리지/세션저장소/쿠키 차이점

by Ratataca 2024. 8. 22.
  1. 로컬스토리지(Local Storage):
    • 로컬스토리지는 클라이언트의 웹 브라우저에 데이터를 저장하는 기술입니다.
    • 로컬스토리지에 저장된 데이터는 서버에 전송되지 않으며, 클라이언트의 웹 브라우저에 영구적으로 저장됩니다.
    • 로컬스토리지에 저장된 데이터는 해당 도메인에서만 접근 가능하며, 다른 도메인에서는 접근할 수 없습니다.
    • 로컬스토리지에 저장된 데이터는 JavaScript를 통해 쉽게 조작할 수 있습니다.
    • 로컬스토리지는 대량의 데이터를 저장할 수 있고, 데이터는 만료기간이 없습니다.
  2. 세션저장소(Session Storage):
    • 세션저장소도 로컬스토리지와 마찬가지로 클라이언트의 웹 브라우저에 데이터를 저장하는 기술입니다.
    • 세션저장소에 저장된 데이터는 세션 기간 동안만 유지되며, 세션이 종료되면 데이터가 삭제됩니다.
    • 세션저장소에 저장된 데이터 역시 해당 도메인에서만 접근 가능하며, 다른 도메인에서는 접근할 수 없습니다.
    • 세션저장소는 로컬스토리지와 마찬가지로 JavaScript를 통해 쉽게 조작할 수 있습니다.
    • 세션저장소는 대량의 데이터를 저장할 수 있습니다.
  3. 쿠키(Cookie):
    • 쿠키는 클라이언트의 웹 브라우저에 저장되는 작은 데이터 조각입니다.
    • 쿠키는 HTTP 프로토콜을 통해 서버와 클라이언트 간에 주고받는 데이터입니다.
    • 쿠키는 지정된 만료 날짜까지 유지되며, 만료 날짜가 지나면 자동으로 삭제됩니다.
    • 쿠키는 도메인, 서브도메인, 경로 등에 따라서 접근 가능성이 제한될 수 있습니다.
    • 쿠키는 JavaScript를 통해 쉽게 조작할 수 있습니다.
    • 쿠키는 일반적으로 작은 크기의 데이터만 저장할 수 있습니다.

결론적으로, 로컬스토리지는 영구적이고 대량의 데이터를 저장하는 데 사용되고, 세션저장소는 세션 동안만 유지되는 데이터를 저장하는 데 사용되고, 쿠키는 서버와 클라이언트 간에 주고받는 작은 데이터 조각을 저장하는 데 사용됩니다. 사용 목적과 데이터의 지속성에 따라서 적절한 저장소를 선택하면 됩니다.

 

로컬스토리지, 세션저장소, 쿠키는 다양한 데이터를 저장하는 데 사용될 수 있습니다. 아래는 예시입니다:

  1. 로컬스토리지:
    • 사용자 설정: 사용자의 환경 설정(언어, 테마 등)을 저장할 수 있습니다.
    • 사용자 선호도: 사용자의 선호도(마지막으로 선택한 옵션, 선호하는 행동 등)를 저장할 수 있습니다.
    • 캐시 데이터: 이미지, 스타일시트, 자바스크립트 파일 등의 캐시 데이터를 저장할 수 있습니다.
  2. 세션저장소:
    • 로그인 정보: 로그인한 사용자의 아이디, 토큰, 권한 등을 저장할 수 있습니다.
    • 장바구니: 사용자가 선택한 상품 정보를 저장해 장바구니에 유지할 수 있습니다.
    • 세션 상태: 현재 사용자의 세션 상태(로그인 상태, 인증 여부 등)를 저장할 수 있습니다.
  3. 쿠키:
    • 사용자 식별 정보: 사용자의 고유 식별자를 저장해 사용자를 식별할 수 있습니다.
    • 개인화된 콘텐츠: 사용자의 선호도에 따라 맞춤형 콘텐츠를 제공하기 위해 사용자 선호도를 저장할 수 있습니다.
    • 추적 및 분석 정보: 방문자의 행동을 추적, 분석하기 위해 사용자의 활동 정보(방문 시간, 페이지 조회 등)를 저장할 수 있습니다.

이외에도 실제 활용되는 데이터에 따라 로컬스토리지, 세션저장소, 쿠키를 사용하여 다양한 데이터를 저장할 수 있습니다. 저장하는 데이터의 양, 보안 요구사항, 지속 기간 등을 고려하여 적절한 저장소를 선택해야 합니다.

 

 

댓글