웹 스토리지(Web Storage)
웹 스토리지란
기존에는 웹 서버를 통해 다량의 데이터를 저장하여 사용하였고, 만약 네트워크가 끊어진 경우에는 데이터를 사용할 수 없고, 항상 서버로부터 데이터를 읽어와야 했기 때문에 성능상의 문제점도 있었다.
이러한 스토리지 시스템이 HTML5의 체제로 넘어오면서 서버 의존적이었던 형태를 탈피하고, 네트워크가 가능하지 않은 상태에서도 스스로 독립적으로 동작할 수 있는 웹 어플리케이션의 형태를 가능하게 만들었다.
쿠키는 클라이언트의 단편적인 정보만을 관리하는데 국한되고, 문자열만 저장할 수 있다는 특정 때문에 데이터 관리 시스템으로써는 턱없이 부족하다 따라서 HTML5의 웹 스토리지는 이러한 쿠키에 대한 보안이라고 할 수 있다.
웹스토리지는 웹 표준API를 통해 데이터를 생성 저장 사용이 가능하다
웹 스토리지와 쿠키의 차이
웹 스토리지와 쿠키의 특징을 간략하게 비교한 것이다.
<이미지 삽입>
웹 스토리지의 저장 프로세스는 크게 2가지로 나눌 수 있는데 하나는 로컬 스토리지(Local Storage)이고, 또 하나는 세션 스토리지(Session Storage)인데, 두 개로 나눈 것은 데이터 정보가 세션 단위에서 관리할 것인지, 도메인 단위에서 관리할 것인지에 대한 차이이다.
** 일반적으로 로그인을 할 때, 인증 토큰은 쿠키에 실어 서버에 요청을 보내지만, 자동 로그인 등을 위한 정보값은 로컬 스토리지에 저장이 가능하다. (이 때, 비밀번호는 이미 암호화가 되어 있기 때문에 해독이 불가능)
그리고 자동 로그인 요청을 클라이언트가 보내면 그 때 인증값이 담긴 토큰을 쿠키에 실어서 서버와 통신한다.
스토리지 데이터 저장 유형
- 로컬 스토리지: 자도 ㅇ로그인
- 세션 스토리지: 입력 폼 정보, 비로그인 장바구니, 글쓰기 하다가 사용자가 창을 벗어난 경우 관련 내용 복구
두 스토리지는 사용 방법은 동일하지만 동작 방식에 차이가 있다.
웹 스토리지 API
웹 스토리지에는 기능적으로는 로컬과 세션으로 나누어지지만, 사용하는 API는 동일하다
로컬 스토리지
- 하나의 도메인 단위로 데이터가 저장된다.
로컬 스토리지 API
- 데이터 저장
- 웹 스토리지의 데이터는 키와 값을 한 쌍으로 관리한다
localStorage.setItem(key, data)
localStorage.key = data
localStorage[key] = data위 3가지는 동일한 결과값을 가진다.
- 데이터 조회
- 값 조회 방식의 형태 도한 다음과 같이 세가지로 나뉘며, getItem() 메소드는 키를 통해 로컬 스토리지에 저장된 값을 가져온다
var data = localStorage.getItem(key)
var data = localStorage.key
var data = localStorage[key]- 데이터 삭제
- 다음과 같이 세가지 형태로 삭제 가능
localStorage.removeItem(key)
delete.localStorage.key
delete.localStorage[key]세션 스토리지
- 하나의 세션은 하나의 브라우저라고 보면 되는데, 각 세션마다 데이터가 별도로 저장된다.
- 세션을 종료하면 데이터가 사라진다.
- 같은 도메인이더라도 세션이 다르면 서로 다른 데이터 영역을 사용한다. 즉, 스크립트를 이용해 세션을 복제한 경우 같은 값을 가진 세션 스토리지가 복제된다.
세션 스토리지 API
- 데이터 저장
sessionStorage.setItem(key, data)
sessionStorage.key = data
sessionStorage[key] = data- 데이터 조회
var data = sessionStorage.getItem(key)
var data = sessionStorage.key
var data = sessionStorage[key]- 데이터 삭제
sessionStorage.removeItem(key)
delete.sessionStorage.key
delete.sessionStorage[key]