8. Web Storage
• localStorage, sessionStorage
localStorage.setItem("bar",”foo”); //값 저장
var foo = localStorage.getItem("bar"); //값 반환
var foo = localStorage["bar"];
localStorage["bar"] = foo;
localStorage.removeItem("bar"); // 값 삭제
localStorage.clear(); // 모두 삭제
localStorage.length ; // 저장된 수
9. Web Storage 특징
대부분의 브라우저에서 지원.
사용하기 쉽다.
유효기간이 없다.
용량이 크다.
오직 client을 위한 Storage.
브라우저간 공유.
문자만 저장, 객체는 toString한 결과 저장.
{}->[object object], []->[object array]
10. Web Storage 지원 현황
• Internet Explorer 8
• Firefox 3.5
• Safari 4
• Google Chrome 4
• Opera 10.50
• iOS 2.0
• Android 2.0
18. indexed Database-DB생성
Address Book
this.db =
window.mozIndexedDB.open(
"AddressBook",//이름
"책 관련 데이터 베이스“//설명
);
19. Object Store 생성
Address Book
contracts
var store = this.db.createObjectStore(
"contacts", //이름
{"keyPath": "id"} //pk (in-line keys - 자동생성, out-of-line keys - 직접 입력)
//false (자동 증가. firefox4 default false, w3c true)
);
20. Data 등록
AddressBook contracts
Id
Name
Email
cell
var writeTransaction = this.db.transaction(
[ "contacts" ],//잠글 object store명
IDBTransaction.READ_WRITE // Lock type (READ_ONLY, READ_WRITE)
//,30 timeout 밀리세컨드
);
var store = writeTransaction.objectStore( "contacts" );
var id = parseInt(Math.random() * 100);
var writeRequest = store.add({
"name" : "mixed", "email" : "mixed@nhn.com", "cell":”0100003333”, "id" : id
});
21. Data 등록
AddressBook contracts
Id
Name
Email
cell
writeRequest.onsuccess = function(e){
console.log (writeRequest.result);//id
};
writeRequest.ontimeout = function ( e ) {
alert("timeout");
writeTransaction.abort();
};
22. Data 검색
AddressBook contracts
Id Id Id Id
Name Name Name Name
Email Email Email Email
cell cell cell cell
var store = readTransaction.objectStore( "contacts" );
var readCursor = store.openCursor();
readCursor.onsuccess = function ( e ) {
if ( readCursor.result ) {
console.log( readCursor.result); //데이터
readCursor.result["continue"]();
}else{
console.log("end");
}
};
23. Indexed Database 특징
Key/value형태.
b-tree데이터 구조.
보다 low레벨을 지원.
Callback패턴이 아니라 다양한 event기반의
패턴.
속도가 빠름.
