3. Web Storage

Web Storage
"쿠키보다 더 많은 저장 공간"

---

 

 

지난 글에선 Cookie를 보안 측면에서 주로 다뤄봤다면, 이번 글에선 저장공간 측면에서 다뤄볼까한다.

웹 브라우저 내에서 저장하는 방법에는 여러가지가 있다. HTML5 이전에는 쿠키(Cookie)가 웹 브라우저의 유일한 저장소 역할을 했지만, HTML5 표준이 등장하면서 Storage가 추가되었고, 이를 통해 웹 개발자는 다양한 방법으로 데이터를 관리할 수 있게 되었다. 이번 포스팅에서는 Storage와 Cookie의 차이점과 용도에 대해 알아보고자 한다.

 

 

Web Strorage란?

Storage는 Cookie, Session 처럼 Stateful HTTP를 위한 기술은 아니다. → 쉽게 말해, 웹 브라우저의 데이터베이스라고 생각하면 편하다.

웹 스토리지는 웹 앱이 브라우저에 데이터를 저장할 수 있도록 하는 클라이언트 측 저장 공간이다.

Local Storage, Session Storage로 나눌 수 있으며 웹 브라우저에 저장된다는 점에선 Strorage와 Cookie는 동일하다.

 

 

---

Storage와 Cookie 차이점

Storage와 Cookie는 모두 웹 브라우저에 데이터를 저장한다는 공통점이 있지만, 그 목적과 용도가 다르다.

• Storage: 웹 브라우저 내에서 사용자가 변경한 옵션 상태 등 필요에 따라 조회 할 수 있는 데이터를 저장하는 데 사용된다. 예를 들어, 마지막에 사용자가 마지막으로 어떤 소셜 계정을 선택했는지 기록해 두었다가, 다음 번 로그인 시에 해당 소셜 계정을 우선적으로 표시하는 기능을 구현할 수 있다. 하지만, 실제 로그인 인증 정보는 저장하지 않는다.
• Cookie: 웹 서버가 클라이언트로부터 반복적으로 전달받아야하는 데이터를 저장하는 데 사용한다. 예를 들어 로그인 인증 정보나 장바구니 정보 등은 웹 서버가 매번 요청을 받을 때 마다 필요로 하는 정보이다.

정리

Storage는 웹 브라우저에서만 사용 가능한 데이터 저장소로, 큰 용량의 데이터를 만료 시간 없이 저장할 수 있다.

Cookie는 웹 서버와 클라이언트 간의 데이터를 교환하기 위해 사용되며, 작은 용량의 데이터를 저장하고 만료 시간을 설정 할 수 있다.

---

Storage의 종류: 유효시간

Storage는 웹 브라우저의 데이터 저장소로, 유효 시간에 따라 두 가지 종류로 나뉜다.

• Local Storage: 웹 브라우저 창을 닫아도 영구적으로 저장되는 데이터. 단, 저장 용량이 크기 때문에 관리에 주의가 필요하다.
  
  • 전반적으로 로컬 스토리지는 브라우저에서 로컬로 데이터를 유지해야 할 때 간단하지만 강력한 클라이언트 측 스토리지 옵션이다.

• 사용자가 실수로 탭을 닫아도 입력 내용을 잃지 않도록 데이터 저장
• 성능 향상을 위해 캐시된 데이터 또는 이미지 추적

 

다음과 같이 로컬 스토리지에 객체를 저장할 수 있다.

const user = { 
    name: 'John Doe',
    age: 30,
    email: '[john@example.com](mailto:john@example.com)'
};

localStorage.setItem('user', JSON.stringify(user));

 

추후에 검색

const user = JSON.parse(localStorage.getItem('user'))

 

• Session Storage: 웹 브라우저 창이 닫히면 삭제되는 데이터입니다. 단발적(휘발성)인 데이터 저장에 사용된다.
  • 전반적으로 세션 스토리지는 사용자가 브라우저 탭/창을 닫을때 지워지는 임시 데이터를 저장하는 방법이다. 데이터는 출처와 탭별로 분리된다.

• 데이터는 세션, 즉 브라우저 탭 동안만 저장된다.
• 브라우저 탭을 닫으면 데이터가 지워진다.
• 데이터는 출처(도메인 + 포트)별로 분리된다.
• 저장 한도는 쿠키보다 크며 약 5MB.
• 동일한 소스에서만 데이터에 접근할 수 있다.
• 세션 저장소는 다음과 같이 단일 사용자 세션에 대한 임시 데이터만 저장하려는 경우에 적용할 수 있다.

 

• 결제 전 페이지 사이에 쇼핑 카트를 저장한다.
• 여러 단계로 구성된 프로세스로 페이지 간에 양식 데이터를 저장한다.
• 단일 세션에 대한 사용자 기본 설정이나 설정을 저장한다.

 

• 다음은 세션 저장소를 사용하여 페이지 간에 양식 데이터를 저장하는 예.

// Save data to sessionStorage
sessionStorage.setItem('name', 'John'); 

// Get saved data from sessionStorage
let name = sessionStorage.getItem('name');

---

Storage의 종류별 용례

프론트엔드 개발자는 브라우저 내에서 다양한 데이터를 저장해야 할 때 Storage를 활용한다.

단발적인 내용은 Session Stroage, 길게 저장해도되는 내용은 Local Storage

---

Storage와 Cookie 비교표

 

특성	Cookie	Storage
저장 가능 용량	4KB	10MB
만료	만료 시간 설정 가능(세션: 영구저장)	만료 시간 설정 불가능(세션: 영구저장)
범위	지정된 Domain + Path에만 유효	지정된 Domain 내에서 모두 유효
보안	Non-HTTPS 요청 시 노출 위험 존재, 스크립트 접근 제어 가능	웹 브라우저에서만 접근 가능, 스크립트 접근 가능
브라우저 간 공유	불가(Session을 통해 해결 가능)	불가(Session을 통해 해결 가능)

 

---

이번 시간엔 Web Storage를 Cookie와 비교하여 알아보았다.
Storage와 Cookie는 모두 웹 브라우저 내에서 데이터를 저장하지만, 그 용도와 사용 목적이 다르다. Cookie는 웹 서버와의 상호작용을 위해 작은 데이터를 저장하는 반면, Storage는 사용자가 변경한 상태나 설정 등을 큰 용량을 장기간 저장할 수 있는 공간이다. 두 가지 모두 웹 개벨에서 중요한 개념이니 꼭 숙달하도록 하자 !

다음 글은 Session에 대해 포스팅해보고자 한다.

 

---

 

ℹ️참고

[ASAC 6기 강의자료]

 

https://www.ramotion.com/blog/what-is-web-storage/