Web Storage

웹 애플리케이션 개발 시 사용자의 브라우저에 데이터를 저장해야 할 때가 있습니다.

이때 사용할 수 있는 세 가지 방법이 LocalStorage, SessionStorage, Cookie 입니다.

모두 클라이언트 상에서 key/value 쌍으로 데이터를 저장하며, 저장된 값은 반드시 문자열이어야 합니다.

또한, 모두 동일 출처 정책(Same-Origin Policy, SOP)을 따르기 때문에 세 기술 모두 다른 도메인에서의 접근은 허용되지 않습니다.

그러나 이들의 생성자, 지속시간, 용량, 서버와의 통신, 취약점 측면에서 차이가 있습니다.

표를 통해 살펴보겠습니다.

예시를 통해 조금 더 구체적으로 살펴보겠습니다.

사용자가 웹사이트에 로그인할 때 서버는 응답과 함께 Set-Cookie 헤더를 보내 사용자의 브라우저에 쿠키를 저장합니다.

이후 사용자가 다른 요청을 할 때마다 브라우저는 자동으로 해당 쿠키를 요청에 포함시켜 서버에 전송합니다.

이를 통해 서버는 사용자가 이미 로그인했음을 인식할 수 있습니다.

LocalStorage: 사용자가 웹사이트에서 어떤 테마를 선택했을 때, 이 선택을 기억하고 싶다면 LocalStorage를 사용할 수 있습니다.

사용자가 테마를 선택하면 해당 정보를 LocalStorage에 저장해 두고, 사용자가 웹사이트를 재방문할 때 저장된 정보를 기반으로 선택된 테마를 활성화합니다.

이 정보는 사용자가 명시적으로 삭제하지 않는 한 브라우저에 계속 저장됩니다.

SessionStorage: 온라인 시험이나 설문조사 등에서 사용자가 데이터를 입력하다가 페이지를 실수로 새로 고침하거나 닫아버린 경우, 입력했던 데이터를 유지하고 싶을 때 SessionStorage를 사용할 수 있습니다.

이 경우, 사용자의 데이터는 브라우저의 탭이나 창을 닫을 때까지만 유지됩니다.

이러한 차이점들을 이해하고 적절하게 활용한다면 보다 효율적으로 사용자의 데이터를 저장하고 관리할 수 있습니다.

각각의 방법이 가지는 특성을 잘 이해하고 적절한 상황에 맞게 선택하는 것이 중요합니다.

LocalStorage, SessionStorage, Cookie 차이점