HTML5에서는 데이터 저장 관련하여 몇가지 기능을 추가 제공한다.
- localStorage
- sessionStorage
- client-side DB
localStorage
- 웹브라우저를 종료해도 데이터가 남는다.
- 동일한 소스(도메인, 프로토콜, 포트)로부터 데이터를 쓸 수 있다.
- 웹 애플리케이션에 유용
- 예)
- 키/값 저장
- localStorage.setItem( ‘gilbird’, 2010);
- 키/값 로드
- var year = localStorage.getItem( ‘gilbird’);
- 키/값 모두 삭제
sessionStorage
- 데이터는 윈도우 객체에 저장
- 해당 윈도우만 인식
- 예)
- 위 localStorage 예에서 sessionStorage라고 바꿔 쓸 수 있음
Client-Side DB
- 자바스크립트 DB API
- INSERT, UPDATE, SELECT, DELETE 지원
- 트랜젝션 지원
- DB 접속
- db = openDatabase( shortName, version, displayName, maxSize);
- 사파리의 경우 maxSize를 5MB 기본 지원(용량초과시 5MB 추가됨 - 확인필요)
- 브라우저 설정에서 로컬 DB 크기를 볼 수 있음
- DB 생성
- db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS 테이블명 (컬럼_리스트);'
);
}
);
- INSERT
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO 테이블명 (컬럼_리스트) VALUES (?);',
transactionErrorHandler, // SQL 실패시 실행
transactionSuccessHandler // SQL 성공시 실행
); } );
- 에러 처리
- function transactionErrorHandler( transaction, error) {
alert( error.message + “:” + error.code);
return true;
}
- 리턴값
- true – 치명적 오류. 진행 중단
- false – 계속 진행
- SELECT
- db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM 테이블명 WHERE 컬럼=?;',
function( transaction, result) {
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);
// row 처리
}
transactionErrorHandler, // SQL 실패시 실행
transactionSuccessHandler // SQL 성공시 실행
); } );
- DELETE
- db.transaction(
function(transaction) {
transaction.executeSql('DELETE FROM 테이블명 WHERE id=?;',
[값], null, transactionErrorHandler);
}
)