Web Storage란 클라이언트의 디스크에 소량의 데이터를 저장해 두기 위한 저장공간 입니다.
Web Storage가 등장하기 전에는 이러한 임시 저장소를 구현하기 위해 일반적으로 Cookie를 사용하였습니다.
그러나 Web Storage는 Cookie와 비교하여 여러 가지 다른점이 있습니다.
특징
- key-value 형태의 데이터를 저장하기 위한 스토리지
- 자바스크립트 객체를 다루듯 사용법이 간단
– 저장 : 스토리지 속성에 값을 지정
– 읽기 : 스토리지 속성에 접근 - 비교적 간단한 형태의 데이터 저장에 알맞음
– 복잡한 구조의 데이터는 Web SQL Database가 적당 - 로컬 스토리지와 세션 스토리지로 구분
Web Storage vs Cookie
- 기본 크기는 5M byte (쿠키는 4k byte – 브라우저별 상이함)
- 서버로 데이터를 보내지 않음 (쿠키는 요청 헤더에 자동으로 포함)
- 만료 기간이 없음 (쿠키는 만료기간 지정)
- 자바스크립트 객체를 저장할 수 있음 (쿠키는 문자열만 저장)
로컬 스토리지
- 도메인별로 각각 별도로 생성되는 저장 영역
- 다른 도메인에서는 접근 불가능
세션 스토리지
-
브라우저(window 객체)와 같은 생존 기간을 가지는 저장 영역
-
브라우저가 닫히면 세션 스토리지 정보도 사라짐
- 각각의 브라우저가 같은 도메인에 접속하더라도 세션 스토리지는 각각 생성
- 브라우저의 기능(새 창, 새 탭 등)을 이용하여 새롭게 창을 열었을 경우에는 세션 스토리지의 값이 복사되며 이후에
수정된 내용은 각각의 창마다 따로 관리 -
로컬 스토리지처럼 도메인별로 각각 별도로 저장 영역이 생성되므로 동일 브라우저 창이라고 해도도메인이 다르면 접근 불가
스토리지 API
스토리지 접근
- 로컬 스토리지 : window.localStorage 속성
- 세션 스토리지 : window.sessionStorage 속성
스토리지에 값 저장
- key값을 스토리지 객체의 속성의 이름으로, value값을 속성의 값으로 직접 저장
– localStorage.userInfo = {name: “홍길동”, age: 29};
– localStorage[“userInfo”] = {name: “홍길동”, age: 29}; - setItem() 메서드 이용
– localStorage.setItem(“userInfo”, {name: “홍길동”, age: 29});
스토리지의 값 읽기
- 스토리지 객체의 속성이름으로 읽기
– var userInfo = localStorage.userInfo;
– var userInfo = localStorage[“userInfo”]; - getItem() 메서드 이용
– var userInfo = localStorage.getItem(“userInfo”);
스토리지의 값 삭제
- delete 연산자 이용
– delete localStorage.userInfo;
– delete localStorage[“userInfo”]; - removeItem() 메서드 이용
– localStorage.removeItem(“userInfo”);
스토리지의 모든 데이터 삭제
- clear() 메서드 이용
– localStorage.clear();
스토리지의 주요 속성과 메서드
- length : 스토리지에 저장된 데이터의 수
- key(index) : 지정한 인덱스의 키를 반환(없으면 null)
- getItem(key) : 지정한 키의 데이터를 반환
- setItem(key, data) : 지정한 키로 데이터를 저장
- removeItem(key) : 지정한 키의 데이터를 삭제
- clear() : 모든 데이터 삭제
스토리지의 이벤트
- 스토리지의 데이터가 변경되면 storage 이벤트 발생
-
이벤트 리스너 인자의 주요 속성
– key : 변경된 키– oldValue : 변경되기 전의 값– newValue : 변경된 값– url : 이벤트가 발생한 문서 url
– storageArea : 변경된 스토리지 참조