Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There...
Transcript of Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There...
![Page 1: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/1.jpg)
© 2010 Haim Michael. All Rights Reserved.
Offline Storage
![Page 2: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/2.jpg)
© 2010 Haim Michael. All Rights Reserved.
Introduction
HTML 5.0 supports a well structured offline storage solution.
There are two types of offline storage possibilities. The first
is the possibility to store session data separately for each
tab. The second is the possibility to store data common to all
tabs and all windows.
![Page 3: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/3.jpg)
© 2010 Haim Michael. All Rights Reserved.
Session Storage
The session storage extends the capabilities we get when
using cookies.
Unlike the cookies mechanism that limits us for storing up to
4kilobytes of data the session storage allows us much more
space.
Unlike the cookies mechanism, the session data isn't sent
automatically to the server every HTTP request.
![Page 4: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/4.jpg)
© 2010 Haim Michael. All Rights Reserved.
Session Storage
Unlike cookies, session storage is tied to the browser tab. It
isn't tied to the browser window. Each tab maintains its own
session information.
![Page 5: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/5.jpg)
© 2010 Haim Michael. All Rights Reserved.
Session Storage
<html><head>
<title>session storage page 1</title></head><body>
<h2>page 1</h2><script language="javascript">
sessionStorage.setItem('company', 'Zindell Technologies');</script>The 'company' (id) and 'Zindell Technologies' (value) were set as a keyvalue pair in the session storage mechanism.<p><a href="session_storage_2.html">next</a>
</body></html>
![Page 6: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/6.jpg)
© 2010 Haim Michael. All Rights Reserved.
Session Storage
<html><head>
<title>session storage page 2</title></head><body>
<h2>page 2</h2><script language="javascript">
function showData(){
alert(sessionStorage.getItem('company'));}
</script><form>
<input type="button" value="click me" onClick="showData()"></form>
</body></html>
![Page 7: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/7.jpg)
© 2010 Haim Michael. All Rights Reserved.
Session Storage
![Page 8: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/8.jpg)
© 2010 Haim Michael. All Rights Reserved.
Session Storage
![Page 9: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/9.jpg)
© 2010 Haim Michael. All Rights Reserved.
Session Storage
![Page 10: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/10.jpg)
© 2010 Haim Michael. All Rights Reserved.
Local Storage
The local storage allows us to save data shared by all tabs.
That data is kept even when the user closes the web
browser.
Instead of using the sessionStorage we should use the
localStorage. The syntax is the same.
![Page 11: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/11.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
The HTML5 specifications provides us with a local relational
database.
We can access that database using the
window.openDatabase property. This property holds a
function that returns an object that represents a specific
database on our web browser.
![Page 12: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/12.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
We can easily check whether the web browser supports the
relational database (or not) by referring the openDatabase
property. If the property doesn't exist the returned value will
be equivalent to false.
![Page 13: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/13.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <script type="text/javascript"> if(window.openDatabase) { document.write("relational database is supported!"); } else { document.write("relational database IS NOT supported!"); } </script></head><body></body></html>
![Page 14: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/14.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 15: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/15.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
We can create a new relational database by calling the
window.openDatabase function passing over the following
arguments: the database short name, its version number, its
long detailed name and its maximum size in bytes.
The returned value is a reference for a new object that
represents the new relational database on our web browser.
![Page 16: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/16.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<html><head> <title></title> <script type="text/javascript"> try { var db = window.openDatabase( 'webstore', '1.0', 'database for web store', 100000); document.write("db version " +db.version+ " is ready to use!"); } catch(ex) { document.write("ex="+ex); } </script></head><body></body></html>
![Page 17: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/17.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 18: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/18.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
We can pass over an empty string as the database version,
get the object that represents the data base, check its
version and if necessary call the changeVersion function
in order to change it.
![Page 19: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/19.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<html><head> <title></title> <script type="text/javascript"> try { var db = window.openDatabase( 'webstore', "", 'database for web store', 100000); document.write("<br>db version " +db.version); db.changeVersion("1.0","1.1"); } catch(ex) { document.write("ex="+ex); } </script></head><body></body></html>
![Page 20: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/20.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 21: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/21.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
In order to perform SQL command on our database we
should call the transaction function on the object that
represents the database.
We should pass over a function with one argument. That
function will be called and an object that represents the
transaction will be passed over to it. One of the functions we
can call on that object is executeSql.
![Page 22: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/22.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<script type="text/javascript"> try { var db = window.openDatabase( 'newwebstore', "1.0", 'database for web store', 100000); db.transaction(function(ob) { ob.executeSql( "CREATE TABLE IF NOT EXISTS products (pid INTEGER, pname TEXT)"); ob.executeSql("INSERT INTO products VALUES(101,'tabolax')"); ob.executeSql("INSERT INTO products VALUES(102,'golgo')"); ob.executeSql("INSERT INTO products VALUES(103,'charmon')"); ob.executeSql("SELECT * FROM products",
[],dataHandler,errorHandler); } ); }
![Page 23: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/23.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database catch(ex) { document.write("ex="+ex); } function errorHandler(error) { document.write("handling error "+error); } function dataHandler(transaction,data) { document.write("<table>"); document.write("<tr><th>id</th><th>name</th></tr>") size = data.rows.length; for(i=0;i<size;i++) { row = data.rows.item(i); document.write(
"<tr><td>"+row['pid']+"</td><td>"+row['pname']+"</td></tr>"); } document.write("</table>"); } </script>
![Page 24: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/24.jpg)
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 25: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/25.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database
The IndexedDB allows us to develop offline web
applications that store data into the web browser and have it
available for the next time the user chooses to run the web
application.
The IndexedDB organizes the data in documents. Each and
every document is identified using a unique id.
When acquiring the object store that will keep the
documents we set the identifier we are going to use.
![Page 26: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/26.jpg)
© 2010 Haim Michael. All Rights Reserved.
Using The IndexedDB Database
Databae Opening Creating or UpdatingThe Database
Start SpecificOperation Transaction
Listening to TheOperation Event
Do SomethingWith Results
![Page 27: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/27.jpg)
© 2010 Haim Michael. All Rights Reserved.
The indexedDB Global Property
This window.indexedDB global property holds a reference
for an object that represents the IndexedDB database.
window.indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) { console.log("The browser doesn't support IndexedDB")}
![Page 28: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/28.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBOpenDBRequest Object
In order to open an indexedDB database we should invoke
the open function on the IndexedDB object we can access
using the window.indexedDB property.
Calling this function indirectly starts the process of opening
the database. It doesn't open it immediately.
![Page 29: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/29.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBOpenDBRequest Object
The open function returns an object that represents the
opening process of an IndexedDB database. It is an object
of the IDBOpenDBRequest type. We can refer its
onerror, onsuccess and onupgradeneeded properties
in order to specify the exact functions we want to be invoked
when these events take place.
![Page 30: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/30.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
The successful result of the database opening process is
getting an IDBDatabase object that represents the
database.
The result property in the IDBOpenDBRequest object,
that represents the opening process, will hold the reference
for the IDBDatabase object.
https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase
![Page 31: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/31.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
We should assign the onsuccess property in our
IDBOpenDBRequest object in order to refer the result
property of the IDBOpenDBRequest object for getting the
IDBDatabase object that represents the database.
demo.request.onsuccess = function(event)
{
demo.db = demo.request.result;
console.log("success: "+ demo.db);
};
![Page 32: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/32.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
We can find the onupgradedneeded property in our
IDBOpenDBRequest object. We should assign this
property with the function that will be executed when there is
a need to create the database or to upgrade the existing
one.
![Page 33: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/33.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
The function we assign this property with has a parameter
that holds a reference for an object with the request
property that refers another object with the result property
that refers an IDBDatabase object, on which we can
invoke the createObjectStore() function.
![Page 34: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/34.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
demo.request.onupgradeneeded = function(event) { var database = event.target.result; var objectStore = database.createObjectStore(
"cars", {keyPath: "id"}); for (var i in demo.data) { objectStore.add(demo.data[i]); }}
![Page 35: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/35.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBTransaction Object
The transaction method can be invoked on the
IDBDatabase object that represents the database in order to
start a new transaction for performing a specific operation.
When calling this method we should pass over the names of
the object stores we want to access.
Calling the transaction method we will immediately get an
IDBTransaction object that represents the transaction.
![Page 36: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/36.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBTransaction Object
Calling the objectStore method on our IDBTransaction
object passing over the name of a specific object store we
will get the reference for an IDBObjectStore object that
represents that specific object store.
![Page 37: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/37.jpg)
© 2010 Haim Michael. All Rights Reserved.
The IDBObjectStore Object
Calling the objectStore method on our IDBTransaction
object passing over the name of a specific object store we
will get the reference for an object that represents that
specific object store.
There are various methods we can invoke on an
IDBObjectStore object that represents an object store.
https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore
![Page 38: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/38.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IndexedDB Simple Demo</title> <script type="text/javascript"> //creating our demo namespace var demo = {}; //different web browsers might have different implementations window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //checking whether the web browser supports the IndexedDB database //if it doesn't then showing a message saying so if (!window.indexedDB) { console.log("The web browser doesn't support IndexedDB") }
![Page 39: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/39.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample //the data we want to store in our indexeddb database demo.data = [ { id: "1232523", brand: "Toyota", year: 2012, model: "Corola" }, { id: "2343434", brand: "Mazda", year: 2008, model: "6" }, { id: "2234345", brand: "Fiat", year: 2014, model: "500 Large"}, { id: "2234333", brand: "Fiat", year: 2011, model: "Bravo"} ]; demo.db; demo.request = window.indexedDB.open("cars", 1); demo.request.onerror = function(event) { console.log("error: "); }; demo.request.onsuccess = function(event) { demo.db = demo.request.result; console.log("success: "+ demo.db); }; demo.request.onupgradeneeded = function(event) { demo.db = event.target.result; var objectStore = demo.db.createObjectStore("cars", {keyPath: "id"}); for (var i in demo.data) { objectStore.add(demo.data[i]); } }
![Page 40: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/40.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
function readItem() { var transaction = demo.db.transaction(["cars"]); var objectStore = transaction.objectStore("cars"); var request = objectStore.get("12121212"); request.onerror = function(event) { console.log("readItem(): cannot find the data item"); }; request.onsuccess = function(event) { if(request.result) { console.log("readItem(): "+ request.result.brand + ", " +request.result.id + ", "+request.result.model); } else { console.log("readItem(): cannot find the item") } }; }
![Page 41: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/41.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
function readAllItems() { var objectStore = demo.db.transaction("cars").objectStore("cars");
objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log("readAllItems(): key=" + cursor.key + " brand=" + cursor.value.brand + " model=" + cursor.value.model + " id="
+cursor.value.id); cursor.continue(); } else { console.log("readAllItems(): no more entries!"); } }; }
![Page 42: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/42.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
function addItem() { var request = demo.db.transaction(["cars"], "readwrite") .objectStore("cars") .add({ id: "12121212", brand: "BMW", year: 2009, model: "318" });
request.onsuccess = function(event) { console.log("addItem(): the new data item was added to your database."); };
request.onerror = function(event) { console.log("addItem(): problem with adding the new data item to the database "); }
}
![Page 43: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/43.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample function removeItem() { var request = demo.db.transaction(["cars"], "readwrite") .objectStore("cars") .delete("12121212"); request.onsuccess = function(event) { console.log("removeItem(): the data item was removed from the database"); }; request.onerror = function(event) { console.log("removeItem(): problem with removing a data item from the database"); } }
</script>
![Page 44: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/44.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
</head>
<body><form> <input type="button" onclick="removeItem()"
value="deleting an item" /> <input type="button" onclick="readItem()"
value="reading a single item" /> <input type="button" onclick="readAllItems()" value="reading all items" /> <input type="button" onclick="addItem()" value="adding an item" /></form></body></html>
![Page 45: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/45.jpg)
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database
![Page 46: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/46.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 1
© 2010 Haim Michael. All Rights Reserved.
Offline Storage
![Page 47: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/47.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 2
© 2010 Haim Michael. All Rights Reserved.
Introduction
HTML 5.0 supports a well structured offline storage solution.
There are two types of offline storage possibilities. The first
is the possibility to store session data separately for each
tab. The second is the possibility to store data common to all
tabs and all windows.
![Page 48: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/48.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 3
© 2010 Haim Michael. All Rights Reserved.
Session Storage
The session storage extends the capabilities we get when
using cookies.
Unlike the cookies mechanism that limits us for storing up to
4kilobytes of data the session storage allows us much more
space.
Unlike the cookies mechanism, the session data isn't sent
automatically to the server every HTTP request.
![Page 49: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/49.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 4
© 2010 Haim Michael. All Rights Reserved.
Session Storage
Unlike cookies, session storage is tied to the browser tab. It
isn't tied to the browser window. Each tab maintains its own
session information.
![Page 50: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/50.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 5
© 2010 Haim Michael. All Rights Reserved.
Session Storage
<html><head>
<title>session storage page 1</title></head><body>
<h2>page 1</h2><script language="javascript">
sessionStorage.setItem('company', 'Zindell Technologies');</script>The 'company' (id) and 'Zindell Technologies' (value) were set as a keyvalue pair in the session storage mechanism.<p><a href="session_storage_2.html">next</a>
</body></html>
![Page 51: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/51.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 6
© 2010 Haim Michael. All Rights Reserved.
Session Storage
<html><head>
<title>session storage page 2</title></head><body>
<h2>page 2</h2><script language="javascript">
function showData(){
alert(sessionStorage.getItem('company'));}
</script><form>
<input type="button" value="click me" onClick="showData()"></form>
</body></html>
![Page 52: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/52.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 7
© 2010 Haim Michael. All Rights Reserved.
Session Storage
![Page 53: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/53.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 8
© 2010 Haim Michael. All Rights Reserved.
Session Storage
![Page 54: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/54.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 9
© 2010 Haim Michael. All Rights Reserved.
Session Storage
![Page 55: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/55.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 10
© 2010 Haim Michael. All Rights Reserved.
Local Storage
The local storage allows us to save data shared by all tabs.
That data is kept even when the user closes the web
browser.
Instead of using the sessionStorage we should use the
localStorage. The syntax is the same.
![Page 56: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/56.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 11
© 2010 Haim Michael. All Rights Reserved.
Relational Database
The HTML5 specifications provides us with a local relational
database.
We can access that database using the
window.openDatabase property. This property holds a
function that returns an object that represents a specific
database on our web browser.
![Page 57: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/57.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 12
© 2010 Haim Michael. All Rights Reserved.
Relational Database
We can easily check whether the web browser supports the
relational database (or not) by referring the openDatabase
property. If the property doesn't exist the returned value will
be equivalent to false.
![Page 58: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/58.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 13
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <script type="text/javascript"> if(window.openDatabase) { document.write("relational database is supported!"); } else { document.write("relational database IS NOT supported!"); } </script></head><body></body></html>
![Page 59: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/59.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 14
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 60: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/60.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 15
© 2010 Haim Michael. All Rights Reserved.
Relational Database
We can create a new relational database by calling the
window.openDatabase function passing over the following
arguments: the database short name, its version number, its
long detailed name and its maximum size in bytes.
The returned value is a reference for a new object that
represents the new relational database on our web browser.
![Page 61: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/61.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 16
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<html><head> <title></title> <script type="text/javascript"> try { var db = window.openDatabase( 'webstore', '1.0', 'database for web store', 100000); document.write("db version " +db.version+ " is ready to use!"); } catch(ex) { document.write("ex="+ex); } </script></head><body></body></html>
![Page 62: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/62.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 17
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 63: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/63.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 18
© 2010 Haim Michael. All Rights Reserved.
Relational Database
We can pass over an empty string as the database version,
get the object that represents the data base, check its
version and if necessary call the changeVersion function
in order to change it.
![Page 64: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/64.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 19
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<html><head> <title></title> <script type="text/javascript"> try { var db = window.openDatabase( 'webstore', "", 'database for web store', 100000); document.write("<br>db version " +db.version); db.changeVersion("1.0","1.1"); } catch(ex) { document.write("ex="+ex); } </script></head><body></body></html>
![Page 65: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/65.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 20
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 66: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/66.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 21
© 2010 Haim Michael. All Rights Reserved.
Relational Database
In order to perform SQL command on our database we
should call the transaction function on the object that
represents the database.
We should pass over a function with one argument. That
function will be called and an object that represents the
transaction will be passed over to it. One of the functions we
can call on that object is executeSql.
![Page 67: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/67.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 22
© 2010 Haim Michael. All Rights Reserved.
Relational Database
<script type="text/javascript"> try { var db = window.openDatabase( 'newwebstore', "1.0", 'database for web store', 100000); db.transaction(function(ob) { ob.executeSql( "CREATE TABLE IF NOT EXISTS products (pid INTEGER, pname TEXT)"); ob.executeSql("INSERT INTO products VALUES(101,'tabolax')"); ob.executeSql("INSERT INTO products VALUES(102,'golgo')"); ob.executeSql("INSERT INTO products VALUES(103,'charmon')"); ob.executeSql("SELECT * FROM products",
[],dataHandler,errorHandler); } ); }
![Page 68: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/68.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 23
© 2010 Haim Michael. All Rights Reserved.
Relational Database catch(ex) { document.write("ex="+ex); } function errorHandler(error) { document.write("handling error "+error); } function dataHandler(transaction,data) { document.write("<table>"); document.write("<tr><th>id</th><th>name</th></tr>") size = data.rows.length; for(i=0;i<size;i++) { row = data.rows.item(i); document.write(
"<tr><td>"+row['pid']+"</td><td>"+row['pname']+"</td></tr>"); } document.write("</table>"); } </script>
![Page 69: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/69.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 24
© 2010 Haim Michael. All Rights Reserved.
Relational Database
![Page 70: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/70.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 25
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database
The IndexedDB allows us to develop offline web
applications that store data into the web browser and have it
available for the next time the user chooses to run the web
application.
The IndexedDB organizes the data in documents. Each and
every document is identified using a unique id.
When acquiring the object store that will keep the
documents we set the identifier we are going to use.
![Page 71: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/71.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 26
© 2010 Haim Michael. All Rights Reserved.
Using The IndexedDB Database
Databae Opening Creating or UpdatingThe Database
Start SpecificOperation Transaction
Listening to TheOperation Event
Do SomethingWith Results
![Page 72: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/72.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 27
© 2010 Haim Michael. All Rights Reserved.
The indexedDB Global Property
This window.indexedDB global property holds a reference
for an object that represents the IndexedDB database.
window.indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) { console.log("The browser doesn't support IndexedDB")}
![Page 73: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/73.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 28
© 2010 Haim Michael. All Rights Reserved.
The IDBOpenDBRequest Object
In order to open an indexedDB database we should invoke
the open function on the IndexedDB object we can access
using the window.indexedDB property.
Calling this function indirectly starts the process of opening
the database. It doesn't open it immediately.
![Page 74: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/74.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 29
© 2010 Haim Michael. All Rights Reserved.
The IDBOpenDBRequest Object
The open function returns an object that represents the
opening process of an IndexedDB database. It is an object
of the IDBOpenDBRequest type. We can refer its
onerror, onsuccess and onupgradeneeded properties
in order to specify the exact functions we want to be invoked
when these events take place.
![Page 75: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/75.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 30
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
The successful result of the database opening process is
getting an IDBDatabase object that represents the
database.
The result property in the IDBOpenDBRequest object,
that represents the opening process, will hold the reference
for the IDBDatabase object.
https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase
![Page 76: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/76.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 31
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
We should assign the onsuccess property in our
IDBOpenDBRequest object in order to refer the result
property of the IDBOpenDBRequest object for getting the
IDBDatabase object that represents the database.
demo.request.onsuccess = function(event)
{
demo.db = demo.request.result;
console.log("success: "+ demo.db);
};
![Page 77: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/77.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 32
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
We can find the onupgradedneeded property in our
IDBOpenDBRequest object. We should assign this
property with the function that will be executed when there is
a need to create the database or to upgrade the existing
one.
![Page 78: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/78.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 33
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
The function we assign this property with has a parameter
that holds a reference for an object with the request
property that refers another object with the result property
that refers an IDBDatabase object, on which we can
invoke the createObjectStore() function.
![Page 79: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/79.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 34
© 2010 Haim Michael. All Rights Reserved.
The IDBDatabae Object
demo.request.onupgradeneeded = function(event) { var database = event.target.result; var objectStore = database.createObjectStore(
"cars", {keyPath: "id"}); for (var i in demo.data) { objectStore.add(demo.data[i]); }}
![Page 80: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/80.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 35
© 2010 Haim Michael. All Rights Reserved.
The IDBTransaction Object
The transaction method can be invoked on the
IDBDatabase object that represents the database in order to
start a new transaction for performing a specific operation.
When calling this method we should pass over the names of
the object stores we want to access.
Calling the transaction method we will immediately get an
IDBTransaction object that represents the transaction.
![Page 81: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/81.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 36
© 2010 Haim Michael. All Rights Reserved.
The IDBTransaction Object
Calling the objectStore method on our IDBTransaction
object passing over the name of a specific object store we
will get the reference for an IDBObjectStore object that
represents that specific object store.
![Page 82: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/82.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 37
© 2010 Haim Michael. All Rights Reserved.
The IDBObjectStore Object
Calling the objectStore method on our IDBTransaction
object passing over the name of a specific object store we
will get the reference for an object that represents that
specific object store.
There are various methods we can invoke on an
IDBObjectStore object that represents an object store.
https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore
![Page 83: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/83.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 38
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IndexedDB Simple Demo</title> <script type="text/javascript"> //creating our demo namespace var demo = {}; //different web browsers might have different implementations window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //checking whether the web browser supports the IndexedDB database //if it doesn't then showing a message saying so if (!window.indexedDB) { console.log("The web browser doesn't support IndexedDB") }
![Page 84: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/84.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 39
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample //the data we want to store in our indexeddb database demo.data = [ { id: "1232523", brand: "Toyota", year: 2012, model: "Corola" }, { id: "2343434", brand: "Mazda", year: 2008, model: "6" }, { id: "2234345", brand: "Fiat", year: 2014, model: "500 Large"}, { id: "2234333", brand: "Fiat", year: 2011, model: "Bravo"} ]; demo.db; demo.request = window.indexedDB.open("cars", 1); demo.request.onerror = function(event) { console.log("error: "); }; demo.request.onsuccess = function(event) { demo.db = demo.request.result; console.log("success: "+ demo.db); }; demo.request.onupgradeneeded = function(event) { demo.db = event.target.result; var objectStore = demo.db.createObjectStore("cars", {keyPath: "id"}); for (var i in demo.data) { objectStore.add(demo.data[i]); } }
![Page 85: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/85.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 40
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
function readItem() { var transaction = demo.db.transaction(["cars"]); var objectStore = transaction.objectStore("cars"); var request = objectStore.get("12121212"); request.onerror = function(event) { console.log("readItem(): cannot find the data item"); }; request.onsuccess = function(event) { if(request.result) { console.log("readItem(): "+ request.result.brand + ", " +request.result.id + ", "+request.result.model); } else { console.log("readItem(): cannot find the item") } }; }
![Page 86: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/86.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 41
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
function readAllItems() { var objectStore = demo.db.transaction("cars").objectStore("cars");
objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log("readAllItems(): key=" + cursor.key + " brand=" + cursor.value.brand + " model=" + cursor.value.model + " id="
+cursor.value.id); cursor.continue(); } else { console.log("readAllItems(): no more entries!"); } }; }
![Page 87: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/87.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 42
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
function addItem() { var request = demo.db.transaction(["cars"], "readwrite") .objectStore("cars") .add({ id: "12121212", brand: "BMW", year: 2009, model: "318" });
request.onsuccess = function(event) { console.log("addItem(): the new data item was added to your database."); };
request.onerror = function(event) { console.log("addItem(): problem with adding the new data item to the database "); }
}
![Page 88: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/88.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 43
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample function removeItem() { var request = demo.db.transaction(["cars"], "readwrite") .objectStore("cars") .delete("12121212"); request.onsuccess = function(event) { console.log("removeItem(): the data item was removed from the database"); }; request.onerror = function(event) { console.log("removeItem(): problem with removing a data item from the database"); } }
</script>
![Page 89: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/89.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 44
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database Sample
</head>
<body><form> <input type="button" onclick="removeItem()"
value="deleting an item" /> <input type="button" onclick="readItem()"
value="reading a single item" /> <input type="button" onclick="readAllItems()" value="reading all items" /> <input type="button" onclick="addItem()" value="adding an item" /></form></body></html>
![Page 90: Introduction to J2MEIntroduction HTML 5.0 supports a well structured offline storage solution. There are two types of offline storage possibilities. The first is the possibility to](https://reader036.fdocuments.us/reader036/viewer/2022071001/5fbda29bac75ba5ccd1ba342/html5/thumbnails/90.jpg)
© 2008 Haim Michael 09/22/14
© 2008 Haim Michael 45
© 2010 Haim Michael. All Rights Reserved.
IndexedDB Database