[HTML5 웹 프로그래밍] HTML5 API

웹 스토리지

클라이언트에 데이터를 저장하기 위한 영역

	쿠키	웹 스토리지
저장 용량	4KB	도메인당 5MB (사실상 용량의 제한이 없음)
네트워크 전송
부하 및 보안	웹 서버에 요청을 보낼 때마다 HTTP 헤더에 담아서 전송 → 많은 트래픽의 발생 및 보안의 취약성 존재	웹 서버로 요청을 하더라도 HTTP 메시지에는 포함되지 않음 → 네트워크 부하 감소
유효 기간	유효 기간이 존재 → 기간 만료 시 자동 삭제	로컬 스토리지는 유효 기간이 없음→ 사용자에 의한 명시적인 삭제에 의해서만 삭제 가능
세션 문제	브라우저의 모든 윈도우가 고유하며, 독립적인 데이터의 저장 X	각 윈도우마다 독립적으로 데이터 저장 O

저장되는 데이터의 구성 (key , value)

키를 통해서만 원하는 데이터의 값에 대한 접근이 가능

→ 중복된 ‘키’를 갖는 데이터는 존재하지 않음

키, 값 → 대소문자 구별, 따옴표(””)를 사용하는 문자열로 표현

저장 데이터의 공유범위와 유효기간에 따른 분류

localStorage | sessionStorage

의미와 동작 방식에서 차이 존재

JS에서 사용 방법은 동일 (객체명만 다름)

 

	local Storage	session Storage
유효 기간	데이터 저장 기간에 제한 없음 → 명시적인 삭제 전까지는 영구적 보관이 가능	데이터 저장 기간이 제한적 → 세션이 종료되면 자동 소멸 → 윈도우에서 웹사이트에 접속하면 생성되고, 창을 닫으면 없어
공유 범위	도메인 마다 별도의 저장 영역을 생성 → 도메인마다 생성된 스토리지에 서로 접근 불가 → 같은 도메인에 속해 있는 모든 윈도우들은 모두 접근 가능	각 세션마다 별도의 저장 영역을 생성 → 같은 도메인 이라고 해도 다른 윈도우에서 생성되면 서로의 스토리지에 접근 불가

웹 스토리지가 로드되면 클라이언트에 자동으로 생성

localStorage 객체와 sessionStorage 객체도 자동생성

웹 스토리지의 지원 여부 확인

if(typeof(Storage) !== "undefined"){
// 세션/로컬 스토리지 기능 구현
} else {
// 웹 스토리지 기능 미지원
}

if(window.localStorage){
// 로컬 스토리지 기능 구현
} else{
// 세션 스토리지 기능 구현
}

스토리지 객체의 속성과 메소드

속성/메소드	설명
length	저장되어 있는 데이터의 개수 반환
key(index)	index 위치에 저장된 데이터의 ‘키’ 반환
getItem(key)	key에 대항하는 데이터의 ‘값’ 반환
setItem(key, value)	key와 value 쌍의 데이터 저장
removeItem(key)	key에 대응하는 데이터 삭제
clear()	스토리지에 저장된 모든 데이터 삭제

데이터 사용 방법

데이터 → key : “” , value : “”

localStorage.setItem(key,value);
localStorage.setItem("HTML" , "2")

localStorage.key = value;
localStorage.HTML = 3
lovalStorage[key] = value;
localStorage[HTML] = 3

확인하는 방법

크롬 - [도구 더 보기] - [개발자 도구] or Ctrl + Shift + i , F12 - Application or 어플리케이션 탭 - Storage 메뉴

웹스토리지 이벤트

window 객체의 storage 이벤트

웹 스토리지에서 삽입, 삭제, 값 변경 등의 변화가 발생하면 다른 모든 윈도우의 웹 페이지에 변경 사실을 전달 ( 세션 스토리지에서는 storage 이벤트가 발생X)

위치정보

HTML geolocation API

사용자의 지리적인 위치 정보를 얻을 때 사용

다양한 지도 관련 서비스에 활용 가능

위치정보 → 개인정보 → 사용자의 동의 필요

window.navigator.geolocation 객체 사용

위치 정보 관련 메소드

메소드	내용
getCurrentPosition()	현재의 위치 정보를 (1회) 얻을 때 사용
watchPosition()	사용자의 위치가 변경될 때마다 업데이트 된 위치 정보를 지속적으로 얻을 때 사용
clearWatch()	watchPosition() 메서드의 동작을 종료

지원 여부 확인

if(navigator.geolocation) { 위치정보 획득 }
else { 위치 정보 미지원 }