박시은

(❁´◡`❁)

2 분 소요


1. 개요

저번 포스팅에서 쿠키와 세션에 대해서 살펴보았다.

쿠키와 세션에 가장 큰 차이점은 상태 정보의 저장 위치에 있다고 하였다. (쿠키는 클라이언트(=접속자 PC)에 정보 저장, 세션은 웹 서버에 정보 저장)

이번에 살펴볼 웹 스토리지는 쿠키와 비슷하게 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 해준다. (HTML5 새로운 기능)

이렇게 보니 쿠키와 웹스토리지가 굉장히 유사해 보인다. 어떤 점이 다른지 공부해보자.



2. 웹스토리지 vs 쿠키

웹 스토리지와 쿠키의 기능 자체는 유사하지만 몇 가지 차이가 있다.

  • 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다.
  • 웹스토리지는 쿠키와 달리 서버로 데이터를 전송하지 않고, 클라이언트 측에서 데이터를 저장하므로서버에 부담이 가지 않는다.


웹 스토리지와 쿠키를 사용하지 않고 DB를 이용해 데이터를 저장하면 되지 않을까?

  • 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터(장바구니, 환경 설정)라면 서버에 데이터를 저장하기보다 클라이언트에서 처리하는 것이 효율적이다.



3. 웹스토리지

클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.

  • 웹 스토리지는 로컬 스토리지, 세션 스토리지로 분류할 수 있으며 가장 큰 차이점은 데이터의 영구성에 있다.
  • 로컬 스토리지와 세션 스토리지는 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드들을 가진다.


3.1 로컬 스토리지

로컬 스토리지에 저장된 데이터는 사용자가 직접 삭제하지 않는 한 계속 유지된다.

  • 영구 저장: 로컬 스토리지에 저장된 데이터는 브라우저를 닫아도 사용자의 컴퓨터에 영구적으로 저장된다.
  • 도메인 별로 저장: 로컬 스토리지는 도메인(웹사이트) 단위로 데이터를 저장한다. 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.
  • 자동 로그인과 같은 지속적으로 필요한 정보를 저장하기 좋다.


3.2 세션 스토리지

세션 스토리지는 로컬 스토리지와 유사한 웹 스토리지 기술이지만, 주로 세션 동안만 데이터를 저장하는 데 사용된다.

  • 세션은 사용자가 웹사이트에 접속한 후 브라우저를 닫을 때까지의 기간을 의미한다.

  • 세션 동안만 저장: 세션 스토리지에 저장된 데이터는 세션 동안만 유지되어 브라우저를 닫을 때 저장된 데이터가 삭제된다.
  • 도메인 별로 저장: 로컬 스토리지와 마찬가지로, 세션 스토리지도 도메인 단위로 데이터를 저장한다.
  • 일회성 로그인 등 잠시 동안 필요한 정보를 저장하기에 좋다.



4. 웹 스토리지 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();



5. 참조


카테고리:

업데이트:

댓글남기기

참고