QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Local Database Storage using Intel XDK

Local Database Storage using Intel XDK

intel-xdk-database-storage

This post is a part 42 of Intel XDK Complete Tutorial post series.

In this tutorial I will show you how to use HTML5 IndexedDB storage in Intel XDK APP. We will also see how to provide an support for non-HTML5 browsers too.

What is IndexedDB?

IndexedDB is a object oriented local database supported by HTML5 browsers. MySQL has databases, tables, columns and rows to store data whereas IndexedDB has database, object store, index and objects to store data respectively. IndexedDB is made object oriented so that you don’t have to learn SQL to work with database.

What if WebView doesn’t support IndexedDB?

Some browser don’t support IndexedDB. So you can include third-party IndexedDB plugin in your app. This plugin adds support for IndexedDB.

indexeddb

Understanding how IndexedDB Works?

IndexedDB allows you to create object stores. Object stores are similar to SQL tables. Objects inside a store behave like rows. Every object store has a key and indexes. Key behaves like a SQL primary index and indexes are similar to other columns in SQL which can be searched by the key.

A object store may or may not have a key. In Indexed DB a database is identified by a name and version. When you create a new version with the same name then the old one is deleted.

IndexedDB API is completely asynchronous.

Requesting Access to IndexedDB and Creating a Object Store

Here is the code to request access to IndexedDB and create a store.

//provide database name and version number
var request = indexedDB.open("qnimate", 1);
var db = null;

request.onupgradeneeded = function(){
    db = request.result;
   
    //create object store and define key property of the objects on that store i.e., primary index. Here "ID" is the key  
    var store = db.createObjectStore("qnimate_store", {keyPath: "ID", autoIncrement: false});
   
    //define other properties of the objects of that store i.e., define other columns.
    store.createIndex("name", "name", {unique: true});
    store.createIndex("age", "age", {unique: false});
    store.createIndex("serialnumber", "serialnumber", {unique: true});
}

request.onsuccess = function(){
    //database connection established
    db = request.result;
}

request.onerror = function(){
    console.log("An error occured while connecting to database");
}

onupgradeneeded is executed if database doesn’t exist already or if the version number is changed. onsuccess event is executed after onupgradeneeded event.

Adding Objects to Object Store

Here is the code to add objects to object store

var object1 = {name: "Narayan", age: "22", ID: "d3223", serialnumber: 1};
var object2 = {name: "QNimate", age: "2", ID: "dasdasd121", serialnumber: 2};
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
store.put(object1);
store.put(object2);

Find a Object

To find a single object from object store you must use the key.

var read_transition = db.transaction("qnimate_store", "readonly");
var store = read_transition.objectStore("qnimate_store");
var row = store.get("d3223");
row.onsuccess = function(evt){
    console.log("Name is: " + row.result.name);
    console.log("ID is: " + row.result.ID);
    console.log("Age is: " + row.result.age);
    console.log("Serial Number: " + row.result.serialnumber);
}

Get all Objects

You can also get all objects from the object store

var read_transition = db.transaction("qnimate_store", "readonly");
var store = read_transition.objectStore("qnimate_store");
var rows = store.openCursor()
rows.onsuccess = function(evt){
    var cursor = evt.target.result;
    if(cursor)
    {
        console.log("Name is: " + cursor.value.name);
        console.log("ID is: " + cursor.key);
        console.log("Age is: " + cursor.value.age);
        console.log("Serial Number: " + cursor.value.serialnumber);
        cursor.continue();     
    }
}

Delete a Object

To delete a object you need to use the key to identify the object.

var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
var deleted_row = store.delete("d3223");

deleted_row.onsuccess = function(event){
    console.log("Deleted");
}

Delete all Objects

You can also wipe out all objects in a object store at once

var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
var delete_all_rows = store.clear();

delete_all_rows.onsuccess = function(event){
    console.log("Deleted all rows");
}

Update Object

You can also update property of a existing object in object store. To do this you simply add the same object again with same key. When key matches with an existing object its replaced.

var object1 = {name: "Narayan Prusty", age: "22", ID: "d3223", serialnumber: 1};
var object2 = {name: "QNimate Blog", age: "2", ID: "dasdasd121", serialnumber: 2};
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
store.put(object1);
store.put(object2);
Jan 6, 2015Narayan Prusty
Get Excerpt in WordPressIntel XDK Geolocation Tutorial
Comments: 9
  1. Bosada
    6 years ago

    I print something before the line;
    var write_transition = db.transaction(“qnimate_store”, “readwrite”);
    and it works but when I print something after that line it is not printed.
    The entries also are not written to the database. What can be the problem?

    ReplyCancel
  2. Subin
    6 years ago

    can i get a complete project file ? The above code copy doesn’t work for me

    ReplyCancel
  3. Dan
    6 years ago

    Hi! I’m creating an app similar to playkids using videos (like video classes). My intention is build the app very light and the user can chose the file to download and store in device. But I don’t have any ideia how to get a video on-line and store in iPad. Using IndexedDB to store in device, that’s will work?

    ReplyCancel
  4. Rodrigo
    7 years ago

    This function to Find an Object is returning null to me. Is there any error? I’m trying to access the result via a document.getElementById, and getting the cursor.key after I retrieved all.

    All I can’t do is to get this one. Its returning undefined. Is there anything I can do?

    ReplyCancel
  5. Zapp
    7 years ago

    Hello Mr. Narayan,
    I’ve surfed a lot to decide witch DB use in my XDK applications and I decided to implement SQLite, mainly after the reading of this post: Stackoverflow post.

    An user wrote in it: “IndexedDB is incompatible with many types and versions of mobile OS”.

    Would you like to upgrade this interesting storage tutorial also with the use of SQLite? More, could you add your suggestions in the use of the most promising DB for XDK and maybe the easier to use and manage in our apps?

    ReplyCancel
    • Narayan Prusty
      7 years ago

      I know that IndexedDB is not supported everywhere therefore I showed how to install a 3rd party plugin to add it if not supported.

      Off the topic:
      u to use https://github.com/mozilla/localForage library which provided a localStorage like API for IndexedDB and Web SQL. That too asynchronous. I discovered it recently.

      ReplyCancel
      • Zapp
        7 years ago

        Nice one, sounds interesting, thanks!

        ReplyCancel
  6. Дадыкин Павел
    8 years ago

    Hello! I’ve done application using IndexedDB and it’s work great in emulator. But on my Android 4.0.3 it doesn’t work. Can you help me?

    ReplyCancel
    • Narayan Prusty
      8 years ago

      use the IndexedDB plugin.

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 9 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is IndexedDB?
  • What if WebView doesn’t support IndexedDB?
  • Understanding how IndexedDB Works?
  • Requesting Access to IndexedDB and Creating a Object Store
  • Adding Objects to Object Store
  • Find a Object
  • Get all Objects
  • Delete a Object
  • Delete all Objects
  • Update Object
Related Articles
  • Database Design For Storing Chat Messages
  • Database Design for Analytics
  • Creating WordPress Tables and Storing Data
  • Working with File System using Intel XDK
  • Intel’s APP Framework Tutorial
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license