February 2012 - Posts
Updating an Existing IndexedDB objectStore
A few weeks ago I have published an article in the CodeProject website called “Getting Started with IndexedDB”. One of the questions that I got was how to update an existing objectStore with a new index. This post will answer the question.
The updateneeded Event
In IndexedDB the only way to update the database is through the updateneeded event. That event is raised when you use the IndexedDB open function with a database version number which is greater than the current database version number. For example, lets assume that there is an IndexedDB database with the name PeopleDB which has a version number of 1. The following code will raise the updateneeded event:
var request = indexedDB.open("PeopleDB", 2);
The open function returns IDBRequest object (since all the functionality in IndexedDB is asynchronous by default) which you will use to wire handlers for onsuccess, onerror and onupgradeneeded. You will wire the events like in the following example:
var request = indexedDB.open("PeopleDB", 2);
request.onsuccess = function (evt) {
db = request.result;
};
request.onerror = function (evt) {
console.log("IndexedDB error: " + evt.target.errorCode);
};
request.onupgradeneeded = function (evt) {
// Change the Database structure
};
The example shows how to wire the event handlers for the success, error and upgradeneeded events. The db is a variable that will hold the database after it is opened.
Creating a New Index
In the event handler for the updateneeded event you can create a new objectStore index. Here is an example of how to do that:
var request = indexedDB.open("PeopleDB", 2);
request.onsuccess = function (evt) {
db = request.result;
};
request.onerror = function (evt) {
console.log("IndexedDB error: " + evt.target.errorCode);
};
request.onupgradeneeded = function (evt) {
var objectStore = evt.currentTarget.transaction.objectStore("people");
objectStore.createIndex("city", "city", { unique: false });
// Store a new value in the objectStore.
var req = objectStore.add({ name: "New person", email: "newperson@company.com", city: "Palms street" });
req.onsuccess = function (event) {
// Add succeeded
};
;
In the example you use the event parameter that is passed to the updateneeded handler to get the opened update transaction. Through the transaction you can get the relevant objectStore which will be manipulated. On the objectStore you use the createIndex function to create a new index. The rest of the code is inserting a new person into the objectStore.
Summary
Updating an IndexedDB existing objectStore is done using the updateneeded which is raised when you change the database version.
HTML5 Sela Open House Slide Deck and Demos
Yesterday, I delivered a Sela HTML5 open house session at Matam Haifa. I want to thank all the attendees who attended and heard about the transition that the web eco-system is going through. The session agenda was as follows:
- What is HTML5?
- The New Elements
- Migration to HTML5
- HTML5 APIs (Canvas, Web Storage, IndexedDB, AppCache, Geolocation and Web Workers)
- CSS3
The slide deck and demos can be downloaded from here.
Enjoy!
Build Modern Web Applications with HTML5, CSS3 and JavaScript Third Round – Session Recordings
A few days ago I delivered a third round of my HTML5 MSDN session at Microsoft Ra’anana. The recordings of the session are now available on Channel9 (in Hebrew).
Here is the first part and a link to watch it on Channel 9:
Here is the second part and a link to watch it on Channel 9:
Enjoy!
Build Modern Web Applications with HTML5, CSS3 and JavaScript Third Round – Slide Deck and Demos
Today, I delivered a third round of my HTML5 MSDN session at Microsoft HQ. I want to thank all the attendees who attended and heard about the transition that the web eco-system is going through. The session agenda was as follows:
- What is HTML5?
- The New Elements
- Migration to HTML5
- HTML5 APIs (Canvas, Web Storage, IndexedDB, AppCache, Geolocation and Web Workers)
- CSS3
The slide deck and demos can be downloaded from here.
Enjoy!
My Coming Gigs
In the next following months I’m going to speak in some events which you can attend.
I’m starting tomorrow with the Build Modern Web Applications with HTML5, CSS3 and JavaScript session at Microsoft Ra’anana. This is the third round of this session in the last four months.
On February 22, I’m having a session about HTML5 in Sela Haifa office. If you live in the north of Israel and you want to attend you can go to this link.
On March, between 25-29, Sela Group is having a SDP conference and in that conference I’ll have 3 tutorial days. On the 26 and 27 of March I’ll have a full HTML5 tutorial day (with Sebastian) and on the 28 a full advanced JavaScript tutorial day (with Elad and Ran).
I’ve also submitted sessions to conferences around the globe so if I’ll be picked up to speak in such a conference I’ll drop an update in the Blog.
See you around!
Getting Started with IndexedDB Article
I’ve started to write a Blog post about IndexedDB and it was too long so I decided to post it as article in The CodeProject web site. The article name is “Getting Started with IndexedDB”.
If you want to start using the IndexedDB JavaScript API, to store data on the client-side and to save round-trips to the database on the server-side the article is for you.
You can read the article here.
Enjoy!