SlideShare una empresa de Scribd logo
1 de 55
Client-SideStorageinHTML5

작성자:전용우(i.nevalose@gmail.com)   
작성년월일:2011/03/06
목차


1.StorageHistory
2.WebStorage

3.WebDatabase

4.IndexedDatabase
1.StorageHistory
1.1TheFirstBrowserWar(95')
1.2userData
1.3LocalSharedObjects(2002’Flash6)
1.3GoogleGear(2007’)
1.4.HTML5




                            WebStorage
                            WebDatabase
2.WebStorage(akaDOMStorage)
2.1.Cookie와비교




                                                                 
                                                                                                  
                                                                                                                              
               
2.3.지원현황
2.2.localStorage와sessionStorage차이
2.3.localStorage메서드
3.WebDatabase
3.1.WebDatabase
3.2.지원현황
3.2.Database생성




                                                                     function(){
this.db=
                                                                     openDatabase('AddressBook','1.0','데이터베이스',(5*1024*1024));
3.3.Table생성.




                                                                                                                                                       function(){
this.db.transaction(function(tx){
3.4.Row생성.




                                                                                                                                     function(){
this.db.transaction(function(tx){
                                                                                                                                                                                                                                                                                                                         
                                                     
                                                                                                                                                                                                                                                                                                                                                                              
function(transaction,resultSet){
3.4.RowFetch.




                            function(){
                 this.db.transaction(function(tx){
                                                                                                                                                                                                              
                                                 
                                                function(transaction,resultSet){
                                                                                                                                         for(vari=0;iresultSet.rows.length;i++){
3.5.Row수정.




                                    function(){
                 this.db.transaction(function(tx){
                                                                                                                                                                                                                                        
                                                                                                
                                                        function(transaction,resultSet){
3.6.Row삭제.




                              function(){
                  this.db.transaction(function(tx){
                                                                                                                                                                      
                                                                   
                                                  function(transaction,resultSet){
3.7.WebDB의문제점




                                                                                                                                                      
                                                                                                              
  
4.IndexedDB(akaWebSimpleDB)
4.1.IndexedDB
4.2.왜IndexedDB인가?
4.3.지원현황?
4.3.IndexedDB의지원방식
4.4.IndexedDB의API
4.5.IndexedDB의API­–DB생성
4.5.IndexedDB의API­–DB생성
4.5.IndexedDB의API­–DB생성




                                                              
                                                                                                               open
4.6.IndexedDB의API­–ObjectStore생성
4.6.IndexedDB의API­–ObjectStore생성
4.6.IndexedDB의API­–ObjectStore생성




                                                                                                                                                                                                                                                                 
                                                                            
                                                                                                                                                                                  createObjectStore
4.6.IndexedDB의API­–ObjectStore생성




                                                                                                                                 setVersion
4.6.IndexedDB의API­–ObjectStore생성




                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                        
                                                                                                                                                                                          
                                                                                                                                                                                                                                                                           
                                          createIndex
4.7.IndexedDB의API­–Datamanipulate
4.7.IndexedDB의API­–Datamanipulate
4.7.IndexedDB의API­–Datamanipulate



                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                
            
                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                              
                                                                                                                                                  add
4.7.IndexedDB의API­–Datamanipulate
4.7.IndexedDB의API­–Datamanipulate
4.7.IndexedDB의API­–Datamanipulate



                                                                                                                                                                                              
                                                                                               
                                                                                                                                           

                                                                                                                                                      

                                                                                                                     delete
4.7.IndexedDB의API­–Datamanipulate



                                                                                                           
                                                                                                                                                    
                                                                                                                                                                  
                                                                                      put
4.8.IndexedDB의API­–DataFetch
4.8.IndexedDB의API­–DataFetch
4.8.IndexedDB의API­–DataFetch



                                                                                                                                        
                                                                            get
4.8.IndexedDB의API­–DataFetch



                                                                                                                                       
                                                                getAll
4.8.IndexedDB의API­–DataFetch



                                                                                                                                                                    
                                                                                        openCursor                                

                                                                                                                  
                                                                   
                                                                                                                                        
                                                                 continue
4.8.IndexedDB의API­–DataFetch



                                                                                                                                                                                                                                                                                                                                   
                                                                                                                                                                                                                                             bound 
                                            
                           
                                                                                                                                                                                                                                                                  
                                                                                                       
                   
                                                                                                                                                                                                                                                                                                               
                                                                                                                 
                                                                                                                                                                          ­–                                                                                         
                                                                                                              
                                                                                                                                                                      ­–
4.8.IndexedDB의API­–DataFetch




                                          index                        
                                                                                                           
                                                    index
4.8.IndexedDB의API­–DataFetch



                                                                                                                                                                                     
                                                                                                                                                                  
                                                                                                         
                                                                                                                                                                                                    
                                                                                                                                                    delete                        
                                                                      
                                                                                                                                                                                                                             
                                                                                                                                                    update
4.9.IndexedDB의장점
Reference
Thankyou.

Más contenido relacionado

Destacado

DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...
DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...
DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...Oscar Buhl
 
Inpres 4 2010
Inpres 4   2010Inpres 4   2010
Inpres 4 2010tiarslide
 
[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)
[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)
[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)DyanaCD
 
Primavaraaaa
PrimavaraaaaPrimavaraaaa
Primavaraaaaion42
 
Jofish eComm talk: New Technologies to Help Families Love
Jofish eComm talk: New Technologies to Help Families Love Jofish eComm talk: New Technologies to Help Families Love
Jofish eComm talk: New Technologies to Help Families Love jofish
 
Late period of ancient egypt
Late period of ancient egyptLate period of ancient egypt
Late period of ancient egypthfetzer
 
Ephemerisle
EphemerisleEphemerisle
Ephemerislecrasch4
 
Glimpse of my work prateek pandey
Glimpse of my work prateek pandeyGlimpse of my work prateek pandey
Glimpse of my work prateek pandeyPrateek Pandey
 
國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版
國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版
國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版佳真 王
 
Au Psy492 M7 A2 P Point Wilczynksi V
Au Psy492 M7 A2 P Point Wilczynksi VAu Psy492 M7 A2 P Point Wilczynksi V
Au Psy492 M7 A2 P Point Wilczynksi VVwilczynski
 
ISOINMUNIZACIÓN Rh
ISOINMUNIZACIÓN RhISOINMUNIZACIÓN Rh
ISOINMUNIZACIÓN RhDANTE RUIZ
 
Dma email+ a multichannel approach to growing your list
Dma email+ a multichannel approach to growing your listDma email+ a multichannel approach to growing your list
Dma email+ a multichannel approach to growing your listRachel Aldighieri
 
The good, the bad and the ugly of lead generation
The good, the bad and the ugly of lead generationThe good, the bad and the ugly of lead generation
The good, the bad and the ugly of lead generationRachel Aldighieri
 
Star power point_presentations1
Star power point_presentations1Star power point_presentations1
Star power point_presentations1lesliegvasquez
 

Destacado (20)

DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...
DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...
DIs interessevaretagelse i EU (Generalforsamling, Europæisk Ungdom København,...
 
Dma awards unplugged 2012
Dma awards unplugged 2012 Dma awards unplugged 2012
Dma awards unplugged 2012
 
Inpres 4 2010
Inpres 4   2010Inpres 4   2010
Inpres 4 2010
 
[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)
[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)
[Topik 8] Matawang Shariah-Dinar & Dirham (Ustaz Rafidi Hashim)
 
DMA Awards unplugged
DMA Awards unpluggedDMA Awards unplugged
DMA Awards unplugged
 
Primavaraaaa
PrimavaraaaaPrimavaraaaa
Primavaraaaa
 
Jofish eComm talk: New Technologies to Help Families Love
Jofish eComm talk: New Technologies to Help Families Love Jofish eComm talk: New Technologies to Help Families Love
Jofish eComm talk: New Technologies to Help Families Love
 
Desch SGP
Desch SGPDesch SGP
Desch SGP
 
Late period of ancient egypt
Late period of ancient egyptLate period of ancient egypt
Late period of ancient egypt
 
Ephemerisle
EphemerisleEphemerisle
Ephemerisle
 
Glimpse of my work prateek pandey
Glimpse of my work prateek pandeyGlimpse of my work prateek pandey
Glimpse of my work prateek pandey
 
國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版
國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版
國光石化開發案的成本效益分析 -環保署--原規模及縮小規模版--修正版
 
Mca afm qb
Mca afm qbMca afm qb
Mca afm qb
 
The 4 C's of Social Media
The 4 C's of Social MediaThe 4 C's of Social Media
The 4 C's of Social Media
 
Au Psy492 M7 A2 P Point Wilczynksi V
Au Psy492 M7 A2 P Point Wilczynksi VAu Psy492 M7 A2 P Point Wilczynksi V
Au Psy492 M7 A2 P Point Wilczynksi V
 
ISOINMUNIZACIÓN Rh
ISOINMUNIZACIÓN RhISOINMUNIZACIÓN Rh
ISOINMUNIZACIÓN Rh
 
Who am i (1)
Who am i (1)Who am i (1)
Who am i (1)
 
Dma email+ a multichannel approach to growing your list
Dma email+ a multichannel approach to growing your listDma email+ a multichannel approach to growing your list
Dma email+ a multichannel approach to growing your list
 
The good, the bad and the ugly of lead generation
The good, the bad and the ugly of lead generationThe good, the bad and the ugly of lead generation
The good, the bad and the ugly of lead generation
 
Star power point_presentations1
Star power point_presentations1Star power point_presentations1
Star power point_presentations1
 

Similar a 웹데브모바일 3월 세미나 자료 : Client side storage in html5

Software Quality Analysis with Alitheia Core
Software Quality Analysis with Alitheia CoreSoftware Quality Analysis with Alitheia Core
Software Quality Analysis with Alitheia CoreGeorgios Gousios
 
Product Matrix1 97
Product Matrix1 97Product Matrix1 97
Product Matrix1 974docshare
 
Product Matrix
Product MatrixProduct Matrix
Product Matrix4docshare
 
Product Matrix1
Product Matrix1Product Matrix1
Product Matrix14docshare
 
Product Matrix1
Product Matrix1Product Matrix1
Product Matrix14docshare
 
情報発信・受信の新しいツール
情報発信・受信の新しいツール情報発信・受信の新しいツール
情報発信・受信の新しいツールkey-cc yamaguchiintlab
 
처음 만져보는 Mac
처음 만져보는 Mac처음 만져보는 Mac
처음 만져보는 MacJinho Jung
 
Ugif 04 2011 informix notonlypointofsales-fr-001
Ugif 04 2011   informix notonlypointofsales-fr-001Ugif 04 2011   informix notonlypointofsales-fr-001
Ugif 04 2011 informix notonlypointofsales-fr-001UGIF
 
Workforce Needs of the California Solar Industry
Workforce Needs of the California Solar IndustryWorkforce Needs of the California Solar Industry
Workforce Needs of the California Solar IndustryJoel West
 
Boom startup overview
Boom startup overviewBoom startup overview
Boom startup overviewbjb84
 
왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)
왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)
왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)Jae-min Sung
 
Wow Ppt With Numbers
Wow Ppt With NumbersWow Ppt With Numbers
Wow Ppt With Numbersromertz
 
Whole genome sequence for cancer
Whole genome sequence for cancerWhole genome sequence for cancer
Whole genome sequence for cancerShawVivian
 
Form Based Code presentation
Form Based Code presentationForm Based Code presentation
Form Based Code presentationPaul Dreher
 
Bloombase Spitfire SOA Compatibility Matrix
Bloombase Spitfire SOA Compatibility MatrixBloombase Spitfire SOA Compatibility Matrix
Bloombase Spitfire SOA Compatibility MatrixBloombase
 
Art agregados naturais por agregados provenientes da reciclagem de entulho de...
Art agregados naturais por agregados provenientes da reciclagem de entulho de...Art agregados naturais por agregados provenientes da reciclagem de entulho de...
Art agregados naturais por agregados provenientes da reciclagem de entulho de...Petiano Camilo Bin
 
Zipcar (HBR Case Study)
Zipcar (HBR Case Study)Zipcar (HBR Case Study)
Zipcar (HBR Case Study)Daniel Zhao
 

Similar a 웹데브모바일 3월 세미나 자료 : Client side storage in html5 (20)

ISO OSI Model
ISO OSI ModelISO OSI Model
ISO OSI Model
 
Software Quality Analysis with Alitheia Core
Software Quality Analysis with Alitheia CoreSoftware Quality Analysis with Alitheia Core
Software Quality Analysis with Alitheia Core
 
Product Matrix1 97
Product Matrix1 97Product Matrix1 97
Product Matrix1 97
 
Product Matrix
Product MatrixProduct Matrix
Product Matrix
 
Product Matrix1
Product Matrix1Product Matrix1
Product Matrix1
 
Product Matrix1
Product Matrix1Product Matrix1
Product Matrix1
 
情報発信・受信の新しいツール
情報発信・受信の新しいツール情報発信・受信の新しいツール
情報発信・受信の新しいツール
 
처음 만져보는 Mac
처음 만져보는 Mac처음 만져보는 Mac
처음 만져보는 Mac
 
Ugif 04 2011 informix notonlypointofsales-fr-001
Ugif 04 2011   informix notonlypointofsales-fr-001Ugif 04 2011   informix notonlypointofsales-fr-001
Ugif 04 2011 informix notonlypointofsales-fr-001
 
Workforce Needs of the California Solar Industry
Workforce Needs of the California Solar IndustryWorkforce Needs of the California Solar Industry
Workforce Needs of the California Solar Industry
 
Boom startup overview
Boom startup overviewBoom startup overview
Boom startup overview
 
왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)
왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)
왕초보를 위한 아이패드 설명서(아이패드로 무엇을 할 수 있을까?)
 
Wow Ppt With Numbers
Wow Ppt With NumbersWow Ppt With Numbers
Wow Ppt With Numbers
 
Portfolio
PortfolioPortfolio
Portfolio
 
Whole genome sequence for cancer
Whole genome sequence for cancerWhole genome sequence for cancer
Whole genome sequence for cancer
 
Form Based Code presentation
Form Based Code presentationForm Based Code presentation
Form Based Code presentation
 
Chap Drive 1
Chap Drive 1Chap Drive 1
Chap Drive 1
 
Bloombase Spitfire SOA Compatibility Matrix
Bloombase Spitfire SOA Compatibility MatrixBloombase Spitfire SOA Compatibility Matrix
Bloombase Spitfire SOA Compatibility Matrix
 
Art agregados naturais por agregados provenientes da reciclagem de entulho de...
Art agregados naturais por agregados provenientes da reciclagem de entulho de...Art agregados naturais por agregados provenientes da reciclagem de entulho de...
Art agregados naturais por agregados provenientes da reciclagem de entulho de...
 
Zipcar (HBR Case Study)
Zipcar (HBR Case Study)Zipcar (HBR Case Study)
Zipcar (HBR Case Study)
 

웹데브모바일 3월 세미나 자료 : Client side storage in html5