-
728x90반응형
Web Storage
웹 스토리지(web storage) API
웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해준다.
HTML5이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)라는 곳에 그 정보를 저장한다.
하지만 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해준다.
웹 스토리지는 최소 5MB이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다.
이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다.
오리진(origin)이란 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자이다.
따라서 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터(data)를 저장하며 또한 같은 데이터에 접근할 수 있다.
웹 스토리지 API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
API
웹 스토리지
8.0
4.0
3.5
4.0
11.5
웹 스토리지 지원 여부 확인
웹 스토리지를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.
문법
if (typeof(Storage)! == "undefined") {
// web storage를 위한 코드 부분
} else {
// web storage를 지원하지 않는 브라우저를 위한 안내 부분
}
웹 스토리지 객체
웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 두 가지 객체를 제공한다.
- sessionStorage 객체 : 하나의 세션(session) 만을 위한 데이터를 저장하는 객체
- localStorage 객체 : 보관 기한이 없는 데이터를 저장할 수 있는 객체
웹 스토리지 객체
웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 두 가지 객체를 제공한다.
- sessionStorage 객체 : 하나의 세션(session)만을 위한 데이터를 저장하는 객체
- localStorage 객체 : 보관 기한이 없는 데이터를 저장할 수 있는 객체
sessionStorage 객체
sessionStorage 객체는 하나의 세션(session)만을 위한 데이터를 저장한다.
따라서 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라진다.
예제
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 API Web Storage</title></head><body><h1>sessionStorage 객체를 이용한 데이터의 저장</h1><div id="counter"></div><p><button onclick="clickCounter()" type="button">카운터 증가!!</button></p><p>브라우저 탭이나 창을 닫으면 카운터의 횟수는 초기화될 것입니다.</p><p>하지만 결과보기를 누르거나 F5를 누르면 초기화되지 않을 것입니다.</p><script>function clickCounter() {if(typeof(Storage) !== "undefined") {if (sessionStorage.clickcount) {sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;} else {sessionStorage.clickcount = 1;}document.getElementById("counter").innerHTML = "카운터의 현재 횟수는 " + sessionStorage.clickcount + "입니다!";} else {document.getElementById("counter").innerHTML = "이 문장은 사용자의 웹 브라우저가 Web Storage API를 지원하지 않을 때 나타납니다!";}}</script></body></html>cs 실행결과 :
sessionStorage 객체를 이용한 데이터의 저장
브라우저 탭이나 창을 닫으면 카운터의 횟수는 초기화될 것입니다.
하지만 결과보기를 누르거나 F5를 누르면 초기화되지 않을 것입니다.
localStorage 객체
localStorage 객체는 보관 기한이 없는 데이터를 저장한다.
따라서 브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅 해도 저장된 데이터는 없어지지 않는다.
예제
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 API Web Storage</title></head><body><h1>localStorage 객체를 이용한 데이터의 저장</h1><div id="counter"></div><p><button onclick="clickCounter()" type="button">카운터 증가!!</button></p><p>브라우저 탭이나 창을 닫아도 카운터의 횟수는 초기화되지 않을 것입니다.</p><script>function clickCounter() {if(typeof(Storage) !== "undefined") {if (localStorage.clickcount) {localStorage.clickcount = Number(localStorage.clickcount) + 1;} else {localStorage.clickcount = 1;}document.getElementById("counter").innerHTML = "카운터의 현재 횟수는 " + localStorage.clickcount + "입니다!";} else {document.getElementById("counter").innerHTML = "이 문장은 사용자의 웹 브라우저가 Web Storage API를 지원하지 않을 때 나타납니다!";}}</script></body></html>cs 실행결과 :
localStorage 객체를 이용한 데이터의 저장
브라우저 탭이나 창을 닫아도 카운터의 횟수는 초기화되지 않을 것입니다.
728x90반응형'Mark Up > Html' 카테고리의 다른 글
Web Worker (0) 2018.10.15 Application Cache (0) 2018.10.12 Drag and Drop (0) 2018.10.11 Geolocation (0) 2018.10.11 Canvas vs SVG (0) 2018.10.11
