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 : 변경된 스토리지 참조
HTML5 이전 웹에서 영상을 표현하기 위해서는 별도 object 또는 embed테그 등을 이용해서
외부 플레이어의 힘을 받아야 영상을 재생할 수 있었습니다.
거기에서 끝나는게 아니라 사용자는 그 동영상을 보기 위해 각종 플러그인(실버라이트, 플레시등)을 설치해야 하는
불편함을 겪어야 했죠. (현재까지도…)
But! HTML5 video테그를 이용한다면 사용자가 별도의 플레이어 설치 없이 비디오를 볼 수 있습니다.
지금부터 간단하게 video테그 사용에 대해 설명 해보겠습니다.
미디어 타입 브라우저 지원 현황 (추가 : 파폭 버전 25에서 MP4플레이 되는것 확인)
브라우저별 지원하는 비디오 타입이 다르기 때문에 타입별로 준비가 필요합니다. (IE 9 이하는 지원하지 않습니다.)
