Web Storage

WebStorage는 HTML 5에서부터 제공하는 기능으로 클라이언트 웹 브라우저에 데이터를 저장할 수 있도록 제공하는 기능이다.

쿠키(Cookies)와 비슷한 기능이다.

 

Web Storage가 필요한 이유

Web Storage의 다음과 같은 장점 때문에 비슷한 역할을 하는 쿠키(Cookie)보다 web Storage를 활용한다.

• 쿠키에 비해 큰 데이터 저장 가능 (쿠키는 4KB의 데이터 제한)
• HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
  • 쿠키는 저장 데이터를 서버로 전송한다. 반면 Web Storage는 브라우저에 저장
• 쿠키는 모든 HTTP Request에 포함되기 때문에 웹 서비스 성능에 영향을 줄 수 있음
• 쿠키는 만료일자 지정 여부에 따라 세션 쿠키와 영구 쿠키로 분리하여 관리할 수 있다.
  • Web Storage는 만료기간 설정이 없다. 지우지 않으면 영구적으로 보관.

그 외 특징

• 문자열 뿐만 아니라 객체 정보도 저장 가능하다. 개발 편의성을 제공해주는 장점
• 용량의 제한이 없다.
• 브라우저에서 직접 저장하기 때문에 오프라인 웹 애플리케이션을 구성할 수 있음

 

Web Storage의 종류

1. LocalStorage

브라우저를 닫았다가 열어도 계속 유지된다.

- 저장한 데이터를 일부러 지우지 않는 이상 영구적으로 보관이 가능하다

- 도메인 마다 별도로 LocalStorage가 생성 : 도메인이 같으면 다 사용 가능하다

- Window 전역 객체의 LocalStorage라는 컬렉션을 통해 저장 조회가 가능하다.

 

2. SessionStorage

브라우저가 열려있는 한 페이지를 Reload 해도 계속 유지된다. 하지만 브라우저를 닫으면 삭제된다.

- 도메인 별로 별도 생성된다. 같은 사이트라도 브라우저가 다르면 다른 영역이다. Document Context가 다르면 다른 영역.

 

 

Web Storage의 사용

// 저장
localStorage.setItem('apple', 'RED');
// 조회
localStorage.getItem('apple');
// 삭제
localStorage.removeItem('apple');
// localStorage 비우기
localStorage.clear()

string, number, boolean 등 모든 타입을 저장할 수 있지만, 모두 문자열로 바뀌어 저장된다.

객체도 저장 가능하지만 JSON.stringify()를 통해 저장하고, JSON.parse()를 통해 조회할 수 있다.

const appleObj = { name: 'apple', color: 'red' }

// 객체 저장
localStorage.setItem('appleObj', JSON.stringify(appleObj));
// 객체 조회 및 사용
const appleToLocal = localStorage.getItem('appleObj');
console.log(JSON.parse(appleToLocal)

Session Storage의 사용법은 위 코드의 localStorage를 sessionStorage로 바꾸어 사용한다.

 

 

## Reference

[Web] 🍪 Cookie와 Web Storage

브라우저 저장소 - LocalStorage, SessionStorage, Cookie