웹 스토리지(Web Storage)란?
웹 스토리지
HTML5 이전에는 응용 프로그램이 서버에 데이터를 요청할 때마다 매번 쿠키에 그 정보를 저장했습니다. 그러나 쿠키 자체의 보안상 취약과 저장소의 제한적인 용량으로 다른 대안을 찾게 되었고, 웹 스토리지가 나오게 되었습니다.
웹 스토리지는 웹 브라우저에서 로컬에 데이터를 저장하고 검색하기 위한 기능을 제공하는 Web API입니다. 데이터가 서버로 전송되지 않고 클라이언트에만 존재하기 때문에 네트워크 트래픽 비용을 줄이고 웹 애플리케이션의 성능을 향상시켜 사용자 경험을 개선하는데 사용됩니다.
웹 스토리지 메서드
웹 스토리지는 key-value 형태의 데이터를 저장하며, JavaScript를 통해 접근하고 조작할 수 있습니다.
| 메서드 | 설명 |
|---|---|
| length | 스토리지에 저장된 데이터의 길이 |
| setItem(key, value) | 키(key)와 값(value)을 기반으로 저장 |
| getItem(key) | 키(key)를 기반으로 값(value)을 반환 |
| removeItem(key) | 키(key)를 기반으로 값(value)을 삭제 |
| clear() | 스토리지에 저장된 모든 데이터를 삭제 |
| key(index) | 해당 인덱스 위치에 있는 데이터를 반환 |
로컬 스토리지
특징
- 데이터는 영구적으로 저장되며, 세션 간에도 유지됩니다.
- 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 저장된 데이터는 사라지지 않습니다.
- 도메인마다 별도로 저장되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능합니다.
용도
- 영구적인 데이터 저장
- 사용자 환경 설정, 테마, 언어 설정 등 저장
- 장바구니에 담은 제품, 작성 중인 양식 데이터 또는 임시 데이터
- 캐싱된 데이터 유지
세션 스토리지
특징
- 하나의 세션만을 위한 데이터를 저장합니다.
- 데이터를 지속적으로 보관하지 않기 때문에 브라우저 탭이나 창을 닫으면 저장된 데이터는 사라집니다.
- 로컬 스토리지와 마찬가지로 도메인마다 별도로 저장됩니다.
용도
- 일시적 데이터 저장
- 페이지 간 데이터 공유
- 웹 애플리케이션 상태 관리
주의 사항
웹 스토리지에 데이터를 저장할 때 주의해야할 중요한 점 중 하나는 데이터가 문자열(string) 형태로 저장된다는 것입니다. 웹 스토리지는 데이터를 문자열로 변환하여 저장하며, 데이터를 가져올 때도 문자열로 반환합니다. 그래서 데이터를 숫자, 객체, 배열 또는 다른 자료형으로 저장하려면 직접 문자열로 변환해야 합니다.
예를 들어, 데이터를 로컬 스토리지에 저장하려면 다음과 같이 문자열로 변환해야 합니다.
데이터를 가져올 때는 다시 JSON 파싱을 수행하여 원래 자료형으로 변환합니다.
이렇게 문자열로 변환하여 저장하고 다시 파싱하여 사용하면 데이터를 웹 스토리지에서 올바르게 관리할 수 있습니다.
마치며
로컬 스토리지는 영구적이고 지속적인 데이터 저장에 사용되며, 세션 스토리지는 일시적이며 브라우저 세션 동안 데이터를 유지하는 데 사용됩니다. 용도와 데이터 수명에 따라 스토리지를 선택해야 합니다.