SlideShare una empresa de Scribd logo
1 de 29
key/value
transaction()
    1     :


    2     :

    3     :
executeSql()
   1     :


   2     :

   3     :
dev.w3.org/html5/webdatabase



   This specification has reached an impasse
key/value
Indexed Database
Indexed Database API
// DB
var request = window.indexedDB.open(
    "CandyDB",
    "My candy store database");

request.onsuccess = function(event) {
  var db = event.result;
  if (db.version != "1") {

      //

  } else {

      //
      loadData(db);
  }
};
//
var createdObjectStoreCount = 0;
var objectStores = [
   { name: "kids", keyPath: "id", autoIncrement: true },
   { name: "candy", keyPath: "id", autoIncrement: true },
   { name: "candySales", keyPath: "", autoIncrement: true }
];

function objectStoreCreated(event) {
  if (++createdObjectStoreCount == objectStores.length) {
    db.setVersion("1").onsuccess = function(event) {
       loadData(db);
    };
  }
}

for (var index = 0; index < objectStores.length; index++) {
  var params = objectStores[index];
  //    DB
    request = db.createObjectStore(params.name, params.keyPath,
                                   params.autoIncrement);
    //
    request.onsuccess = objectStoreCreated;
}
var   kids = [
  {   name: "Anna" },
  {   name: "Betty" },
  {   name: "Christine" }
];

// DB
var request = window.indexedDB.open(
    "CandyDB",
    "My candy store database");

request.onsuccess = function(event) {
  var objectStore = event.result.objectStore("kids");
  for (var index = 0; index < kids.length; index++) {
    var kid = kids[index];
    //
      objectStore.add(kid).onsuccess = function(event) {
         document.getElementById("display").textContent =
           "Saved record for "+kid.name+" with id "+event.result;
      };
  }
};
// DB
var request = window.indexedDB.open(
    "CandyDB",
    "My candy store database");

request.onsuccess = function(event) {
  //
  request = event.result.objectStore("kids").openCursor();
  request.onsuccess = function(event) {
    var cursor = event.result;
    // cursor    null
    if (!cursor) {
      return;
    }
    var element = document.createElement("div");
    element.textContent = cursor.value.name;
    document.getElementById("kidList").appendChild(element);
    cursor.continue();
  };
};
Web Storage
http://dev.w3.org/html5/webstorage/Overview.html

Web SQL Database
http://dev.w3.org/html5/webdatabase/

Indexed Database
http://www.w3.org/TR/IndexedDB/

Firefox 4    Indexed Database API
https://dev.mozilla.jp/hacksmozillaorg/firefox-4-an-early-walk-through-of-
indexeddb/


Simple to-do list with jQuery and local storage.
http://www.tuttoaster.com/tag/html5/

Más contenido relacionado

La actualidad más candente

Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)
Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)
Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)Sirar Salih
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresRobert Nyman
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?Gil Fink
 
Hi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab PresentationHi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab Presentationplindner
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and ModernizrJussi Pohjolainen
 
Jquery introduce
Jquery introduceJquery introduce
Jquery introduceMajor Ye
 
Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j querythewarlog
 
Consume Spring Data Rest with Angularjs
Consume Spring Data Rest with AngularjsConsume Spring Data Rest with Angularjs
Consume Spring Data Rest with AngularjsCorneil du Plessis
 
JQuery Comprehensive Overview
JQuery Comprehensive OverviewJQuery Comprehensive Overview
JQuery Comprehensive OverviewMohamed Loey
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoRobert Nyman
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresRobert Nyman
 
Don't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQueryDon't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQueryshabab shihan
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileRobert Nyman
 
You Can Kick-Ass Too, AtlasCamp US 2012
You Can Kick-Ass Too, AtlasCamp US 2012You Can Kick-Ass Too, AtlasCamp US 2012
You Can Kick-Ass Too, AtlasCamp US 2012Atlassian
 

La actualidad más candente (20)

Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)
Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)
Azure Table Storage: The Good, the Bad, the Ugly (10 min. lightning talk)
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
 
Hi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab PresentationHi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab Presentation
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
 
Jquery introduce
Jquery introduceJquery introduce
Jquery introduce
 
JQuery
JQueryJQuery
JQuery
 
Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j query
 
Consume Spring Data Rest with Angularjs
Consume Spring Data Rest with AngularjsConsume Spring Data Rest with Angularjs
Consume Spring Data Rest with Angularjs
 
JQuery Comprehensive Overview
JQuery Comprehensive OverviewJQuery Comprehensive Overview
JQuery Comprehensive Overview
 
Css Selectors
Css SelectorsCss Selectors
Css Selectors
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Don't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQueryDon't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQuery
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
 
Jquery Basics
Jquery BasicsJquery Basics
Jquery Basics
 
Javascript Php Crud
Javascript Php CrudJavascript Php Crud
Javascript Php Crud
 
You Can Kick-Ass Too, AtlasCamp US 2012
You Can Kick-Ass Too, AtlasCamp US 2012You Can Kick-Ass Too, AtlasCamp US 2012
You Can Kick-Ass Too, AtlasCamp US 2012
 

Destacado

Wordbench fukuoka
Wordbench fukuokaWordbench fukuoka
Wordbench fukuokaJunji Manno
 
Word Camp Fukuoka 2010
Word Camp Fukuoka 2010Word Camp Fukuoka 2010
Word Camp Fukuoka 2010Junji Manno
 
20120427西区勉強会
20120427西区勉強会20120427西区勉強会
20120427西区勉強会Junji Manno
 
Word benchfukuoka
Word benchfukuokaWord benchfukuoka
Word benchfukuokaJunji Manno
 
Wordbench fukuoka
Wordbench fukuokaWordbench fukuoka
Wordbench fukuokaJunji Manno
 
PHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudy
PHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudyPHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudy
PHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudyHikari Fukasawa
 
PHPバージョン別応答速度比較
PHPバージョン別応答速度比較PHPバージョン別応答速度比較
PHPバージョン別応答速度比較Takayuki Saito
 
SORACOM interstellar 紹介資料
SORACOM interstellar 紹介資料SORACOM interstellar 紹介資料
SORACOM interstellar 紹介資料SORACOM,INC
 

Destacado (8)

Wordbench fukuoka
Wordbench fukuokaWordbench fukuoka
Wordbench fukuoka
 
Word Camp Fukuoka 2010
Word Camp Fukuoka 2010Word Camp Fukuoka 2010
Word Camp Fukuoka 2010
 
20120427西区勉強会
20120427西区勉強会20120427西区勉強会
20120427西区勉強会
 
Word benchfukuoka
Word benchfukuokaWord benchfukuoka
Word benchfukuoka
 
Wordbench fukuoka
Wordbench fukuokaWordbench fukuoka
Wordbench fukuoka
 
PHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudy
PHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudyPHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudy
PHP7を実際に動かしてみた@第96回PHP勉強会 #phpstudy
 
PHPバージョン別応答速度比較
PHPバージョン別応答速度比較PHPバージョン別応答速度比較
PHPバージョン別応答速度比較
 
SORACOM interstellar 紹介資料
SORACOM interstellar 紹介資料SORACOM interstellar 紹介資料
SORACOM interstellar 紹介資料
 

Similar a Web storage

Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps OfflinePedro Morais
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloRobert Nyman
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it meansRobert Nyman
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranRobert Nyman
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowRobert Nyman
 
WooCommerce CRUD and Data Store by Akeda Bagus
WooCommerce CRUD and Data Store by Akeda BagusWooCommerce CRUD and Data Store by Akeda Bagus
WooCommerce CRUD and Data Store by Akeda BagusWordCamp Indonesia
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceParashuram N
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databasesGil Fink
 
The Principle of Hybrid App.
The Principle of Hybrid App.The Principle of Hybrid App.
The Principle of Hybrid App.musart Park
 
Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)Mike West
 
Whos afraid of front end databases?
Whos afraid of front end databases?Whos afraid of front end databases?
Whos afraid of front end databases?Gil Fink
 
第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」
第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」
第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」Tsuyoshi Yamamoto
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformancejQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformanceJonas De Smet
 
Designing a ui for microservices @ .NET Day Switzerland 2019
Designing a ui for microservices @ .NET Day Switzerland 2019Designing a ui for microservices @ .NET Day Switzerland 2019
Designing a ui for microservices @ .NET Day Switzerland 2019Mauro Servienti
 
Practical Event Sourcing
Practical Event SourcingPractical Event Sourcing
Practical Event SourcingMathias Verraes
 

Similar a Web storage (20)

Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps Offline
 
Indexed db
Indexed dbIndexed db
Indexed db
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
Html indexed db
Html indexed dbHtml indexed db
Html indexed db
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it means
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
 
WooCommerce CRUD and Data Store by Akeda Bagus
WooCommerce CRUD and Data Store by Akeda BagusWooCommerce CRUD and Data Store by Akeda Bagus
WooCommerce CRUD and Data Store by Akeda Bagus
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
 
The Principle of Hybrid App.
The Principle of Hybrid App.The Principle of Hybrid App.
The Principle of Hybrid App.
 
Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)
 
Whos afraid of front end databases?
Whos afraid of front end databases?Whos afraid of front end databases?
Whos afraid of front end databases?
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
22 j query1
22 j query122 j query1
22 j query1
 
第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」
第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」
第3回Grails/Groovy勉強会名古屋「Grails名古屋座談会」
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformancejQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
 
Designing a ui for microservices @ .NET Day Switzerland 2019
Designing a ui for microservices @ .NET Day Switzerland 2019Designing a ui for microservices @ .NET Day Switzerland 2019
Designing a ui for microservices @ .NET Day Switzerland 2019
 
Practical Event Sourcing
Practical Event SourcingPractical Event Sourcing
Practical Event Sourcing
 

Web storage

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. transaction() 1 : 2 : 3 :
  • 16.
  • 17. executeSql() 1 : 2 : 3 :
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. dev.w3.org/html5/webdatabase This specification has reached an impasse
  • 25. // DB var request = window.indexedDB.open( "CandyDB", "My candy store database"); request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // } else { // loadData(db); } };
  • 26. // var createdObjectStoreCount = 0; var objectStores = [ { name: "kids", keyPath: "id", autoIncrement: true }, { name: "candy", keyPath: "id", autoIncrement: true }, { name: "candySales", keyPath: "", autoIncrement: true } ]; function objectStoreCreated(event) { if (++createdObjectStoreCount == objectStores.length) { db.setVersion("1").onsuccess = function(event) { loadData(db); }; } } for (var index = 0; index < objectStores.length; index++) { var params = objectStores[index]; // DB request = db.createObjectStore(params.name, params.keyPath, params.autoIncrement); // request.onsuccess = objectStoreCreated; }
  • 27. var kids = [ { name: "Anna" }, { name: "Betty" }, { name: "Christine" } ]; // DB var request = window.indexedDB.open( "CandyDB", "My candy store database"); request.onsuccess = function(event) { var objectStore = event.result.objectStore("kids"); for (var index = 0; index < kids.length; index++) { var kid = kids[index]; // objectStore.add(kid).onsuccess = function(event) { document.getElementById("display").textContent = "Saved record for "+kid.name+" with id "+event.result; }; } };
  • 28. // DB var request = window.indexedDB.open( "CandyDB", "My candy store database"); request.onsuccess = function(event) { // request = event.result.objectStore("kids").openCursor(); request.onsuccess = function(event) { var cursor = event.result; // cursor null if (!cursor) { return; } var element = document.createElement("div"); element.textContent = cursor.value.name; document.getElementById("kidList").appendChild(element); cursor.continue(); }; };
  • 29. Web Storage http://dev.w3.org/html5/webstorage/Overview.html Web SQL Database http://dev.w3.org/html5/webdatabase/ Indexed Database http://www.w3.org/TR/IndexedDB/ Firefox 4 Indexed Database API https://dev.mozilla.jp/hacksmozillaorg/firefox-4-an-early-walk-through-of- indexeddb/ Simple to-do list with jQuery and local storage. http://www.tuttoaster.com/tag/html5/

Notas del editor

  1. Session Storage &amp;#x30B5;&amp;#x30A4;&amp;#x30C8;&amp;#x306F;&amp;#x3001;&amp;#x30BB;&amp;#x30C3;&amp;#x30B7;&amp;#x30E7;&amp;#x30F3;&amp;#x30FB;&amp;#x30B9;&amp;#x30C8;&amp;#x30EC;&amp;#x30FC;&amp;#x30B8;&amp;#x306B;&amp;#x30C7;&amp;#x30FC;&amp;#x30BF;&amp;#x3092;&amp;#x52A0;&amp;#x3048;&amp;#x308B;&amp;#x3053;&amp;#x3068;&amp;#x304C;&amp;#x3067;&amp;#x304D;&amp;#x3001;&amp;#x305D;&amp;#x306E;&amp;#x30A6;&amp;#x30A3;&amp;#x30F3;&amp;#x30C9;&amp;#x30A6;&amp;#x3067;&amp;#x958B;&amp;#x304B;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x308B;&amp;#x540C;&amp;#x3058;&amp;#x30B5;&amp;#x30A4;&amp;#x30C8;&amp;#x306E;&amp;#x3069;&amp;#x3093;&amp;#x306A;&amp;#x30DA;&amp;#x30FC;&amp;#x30B8;&amp;#x304B;&amp;#x3089;&amp;#x3067;&amp;#x3082;&amp;#x30A2;&amp;#x30AF;&amp;#x30BB;&amp;#x30B9;&amp;#x3059;&amp;#x308B;&amp;#x3053;&amp;#x3068;&amp;#x304C;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x3088;&amp;#x3046;&amp;#x306B;&amp;#x306A;&amp;#x308A;&amp;#x307E;&amp;#x3059;&amp;#x3002;