HTML5 Web Storage, Web SQL Database

HTML5에 와서 중요한 개념이 생기기 시작하는데, 보안에 취약하고 제약사항이 있는 쿠키에 대한 대안이라던가 클라이언트 사이트에서 동작하는 DB가 바로 그것이다.

개인적인 생각으로는 상위버전에서 없어질지도 모르는 기능이라고 생각하지만, 이런 시도들이 결실을 맺어 고전적인 방식의 웹 프로그래밍은 사라질 것은 분명하다는 것이다.

이들에 대해서는 한 사이트의 정의된 내용을 소개하고 추후 사용하게 된다면 자세히 기재하도록 하겠다.

 

Web Storage

  

The two storages are session storage and local storage and they would be used to handle different situations.

 

The Session Storage is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.

 

The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.

 

 

Web SQL Database

 

The Web SQL Database API isn't actually part of the HTML5 specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

추가) 2012.09.04

웹 스토리지에 대해 정리하려고 하다가 이미 잘 정리된 글이 있어 등록해둔다.
자세한 그림이나 예제는 출처의 사이트에서 확인하기 바란다.
필자는 하위호환성을 위해 웹 스토리지를 지원하는 브라우저는 웹 스토리지를 썼고, 그렇지 못한 브라우저는 쿠키로 대신했다.

 

웹 스토리지란 클라이언트쪽에 소량의 데이터를 저장해 두기 위한 스토리지입니다.

웹 스토리지를 다룰때는 그동안 일반적으로 사용되던 쿠키와 많이 비교를 하게 되는데요,

간단하게 한번 보도록 하겠습니다.

 

쿠키

 

- 4KB의 저장 용량, 크기가 작다. 

- 같은 사이트내에서 둘 이상의 탭을 열었을 때, 둘 이상의 트랜젝션 추적에 어려움이 있다.

- 이 외에도 여러 보안문제가 있다. 

 

웹 스토리지

 

- 사양에 따르면 크기 제한이 없다.

- 서버로 보내지 않는다. (원하면 명시적으로 보낼 수 있다.)

- 유효기간이 없다.

- JavaScript 객체를 저장할 수 있다.(정확하게는 객체의 복사본이 저장된다.)

- 웹 스토리지에는 Session Storage와 Local Storage가 있다.

 

키와 값

Web Storage는 간단하게 키와 값으로 데이터를 저장할 수 있습니다.

또한 해당하는 키를 통해 값을 꺼낼 수 있습니다.

 

웹 스토리지의 유효 범위

웹 스토리지의 유효범위는 Session Storage와 Local Storage에 약간 차이가 있습니다.

먼저 그림으로 살펴보고 아래의 내용을 읽어보면 쉽게 이해할 수 있습니다.

Session Storage

- 도메인마다 따로 생성된다.

- 윈도우(window 객체)와 같은 유효범위와 생존기간을 가진다. (같은 도메인이라도 윈도우마다 따로 생성된다.)

- 윈도우 복제로 생성된 경우, 스크립트를 이용해 새 창을 연 경우 같은 값을 가진 세션 스토리지가 "복제"된다.

- 새로 생성된 윈도우와 기존 윈도우의 세션 스토리지는 서로 영향을 주지 않는다.

 

Local Storage

- 도메인마다 따로 생성된다.

- 지속기간에 제한이 없다. 사용자가 명시적으로 지우지 않는 한 영구적으로 저장된다.

- 도메인이 다르면 서로의 로컬 스토리지에 접근할 수 없다. (hi.croute.me와 hello.croute.me는 다른 로컬 스토리지)

- 같은 도메인, 예를들면 croute.me에 소속된 웹페이지는 모두 같은 로컬 스토리지를 가진다.(접근한다.)

- Cookie를 이용한 사이트 고유 설정 정보등을 대신하기에 적당하다.

 

세션과 로컬의 차이점은 로컬은 지속성(보존)을 가지기 때문에 여러 창을 켜도 같은 도메인이라면, 같은 스토리지를 사용하는 것입니다. 세션 스토리지는 각 세션마다 새로운 스토리지를 사용하고 폐기합니다.

 

웹 스토리지 메소드

스토리지의 메소드는 세션 스토리지와 로컬 스토리지의 메소드가 같습니다.

 

메소드	설명
length	스토리지에 저장된 데이터의 수를 반환
key(index)	지정된 인덱스의 키를 반환하고 키가 없다면 null 반환
getItem(key)	지정된 키에 대응하는 데이터를 반환
setItem(key, data)	지정된 키로 스토리지에 데이터를 저장
removeItem(key)	지정된 키에 대응하는 데이터를 삭제
clear()	모든 데이터를 스토리지에서 삭제

 

아래는 로컬 스토리지를 통해 알아본 저장/읽기/삭제에 대한 사용 예입니다.

메소드를 통하지 않은 키를 통한 직접적인 접근도 할 수 있습니다.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 저장 localStorage.croute = "good job"; localStorage["croute"] = "good job"; localStorage.setItem("croute", "good job");   // 읽기 varcroute = localStorage.croute; varcroute = localStorage["croute"]; varcroute = localStorage.getItem["croute"];   // 삭제 deletelocalStorage.croute; deletelocalStorage["croute"]; localStorage.removeItem("croute");

 

아래는 for loop를 사용해서 storage에 저장된 모든 값을 가져오는 코드입니다.

 

1 2 3 4 5

for(vari = 0; i < localStorage.length; i++) {     varkey = localStorage.key(i);     varvalue = localStorage[key]; }

출처 : http://croute.me/419