저번 포스팅에서 쿠키와 세션에 대해서 살펴보았다.
쿠키와 세션에 가장 큰 차이점은 상태 정보의 저장 위치에 있다고 하였다.
(쿠키는 클라이언트(=접속자 PC)에 정보 저장, 세션은 웹 서버에 정보 저장)
이번에 살펴볼 웹 스토리지는 쿠키와 비슷하게 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 해준다. (HTML5 새로운 기능)
이렇게 보니 쿠키와 웹스토리지가 굉장히 유사해 보인다. 어떤 점이 다른지 공부해보자.
▶ 웹스토리지 vs 쿠키
웹 스토리지와 쿠키의 기능 자체는 유사하지만 몇 가지 차이가 있다.
- 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다.
- 웹스토리지는 쿠키와 달리 서버로 데이터를 전송하지 않고, 클라이언트 측에서 데이터를 저장하므로서버에 부담이 가지 않는다.
웹 스토리지와 쿠키를 사용하지 않고 DB를 이용해 데이터를 저장하면 되지 않을까?
- 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터(장바구니, 환경 설정)라면 서버에 데이터를 저장하기보다 클라이언트에서 처리하는 것이 효율적이다.
▶ 웹스토리지
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.
- 웹 스토리지는 로컬 스토리지, 세션 스토리지로 분류할 수 있으며 가장 큰 차이점은 데이터의 영구성에 있다.
- 로컬 스토리지와 세션 스토리지는 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드들을 가진다.
▷ 로컬 스토리지
로컬 스토리지에 저장된 데이터는 사용자가 직접 삭제하지 않는 한 계속 유지된다.
- 영구 저장: 로컬 스토리지에 저장된 데이터는 브라우저를 닫아도 사용자의 컴퓨터에 영구적으로 저장된다.
- 도메인 별로 저장: 로컬 스토리지는 도메인(웹사이트) 단위로 데이터를 저장한다. 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.
- 자동 로그인과 같은 지속적으로 필요한 정보를 저장하기 좋다.
▷ 세션 스토리지
- 세션 스토리지는 로컬 스토리지와 유사한 웹 스토리지 기술이지만, 주로 세션 동안만 데이터를 저장하는 데 사용된다.
- 세션은 사용자가 웹사이트에 접속한 후 브라우저를 닫을 때까지의 기간을 의미한다.
- 세션 동안만 저장: 세션 스토리지에 저장된 데이터는 세션 동안만 유지되어 브라우저를 닫을 때 저장된 데이터가 삭제된다.
- 도메인 별로 저장: 로컬 스토리지와 마찬가지로, 세션 스토리지도 도메인 단위로 데이터를 저장한다.
- 일회성 로그인 등 잠시 동안 필요한 정보를 저장하기에 좋다.
▶ 웹 스토리지 API
웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다.
웹 스토리지 API 주요 메서드
| 메서드 | 설명 |
|---|---|
| setItem(key, value) | 지정된 키와 값을 스토리지에 저장한다. |
| getItem(key) | 지정된 키에 해당하는 값을 스토리지에서 가져온다, 키가 존재하지 않을 경우 null 반환 |
| removeItem(key) | 지정된 키에 해당하는 값을 스토리지에서 제거한다. |
| clear() | 스토리지에 저장된 모든 키-값 쌍을 제거하여 스토리지를 비운다. |
| length | 스토리지에 저장된 키-값 쌍의 개수를 반환한다. |
| key(index) | 정된 인덱스에 해당하는 키를 반환한다. |
아래처럼 웹 스토리지 API를 사용하면 클라이언트 측에서 간단한 데이터 저장과 관리를 쉽게 할 수 있다.
// 로컬 스토리지에 데이터 저장
localStorage.setItem('name', 'sieun');
localStorage.setItem('age', '22');
// 세션 스토리지에서 데이터 읽기
const name = sessionStorage.getItem('name');
console.log(name); // "sieun"
// 로컬 스토리지에서 데이터 제거
localStorage.removeItem('age');
// 스토리지 비우기
sessionStorage.clear();
📎참조
블로그 이전했습니다!