• Home
  • DSA
  • Concept
  • Interview
  • Tips&Tricks
  • Tutorial Videos
  • Home
  • DSA
  • Concept
  • Interview
  • Tips&Tricks
  • Tutorial Videos
  • #News
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk
  • #Advertise

MyCodeTips mycodetips-newlogocopy1

  • Home
  • DSA
  • Concept
  • Interview
  • Tips&Tricks
  • Tutorial Videos
Javascript, Tips&Tricks, Web

Storing objects in IndexedDB in HTML5

Storing objects in IndexedDB in HTML5

IndexedDB has a concept of “Object Stores.” You can think of this as a typical database table.Object stores have data (obviously) but also a keypath and an optional set of indexes. Keypaths are basically unique identifiers for your data and come in a few different formats. Indexes will be covered later when we start talking about retrieving data.
Now for something crucial. Remember the upgradeneeded event mentioned before? You can only create object stores during an upgradeneeded event. Now – by default – this will run automatically the first time a user hits your site. You can use this to create your object stores. The crucial thing to remember is that if you ever need to modify your object stores, you’re going to need to upgrade the version (back in that open event) and write code to handle your changes. Lets take a look at a simple example of this in action.

var idbSupported = false;
var db;

document.addEventListener(“DOMContentLoaded”, function(){

if(“indexedDB” in window) {
idbSupported = true;
}

if(idbSupported) {
var openRequest = indexedDB.open(“test_v2”,1);

openRequest.onupgradeneeded = function(e) {
console.log(“running onupgradeneeded”);
var thisDB = e.target.result;

if(!thisDB.objectStoreNames.contains(“firstOS”)) {
thisDB.createObjectStore(“firstOS”);
}

}

openRequest.onsuccess = function(e) {
console.log(“Success!”);
db = e.target.result;
}

openRequest.onerror = function(e) {
console.log(“Error”);
console.dir(e);
}

}

},false);
This example (test4.html) builds upon the previous entries so I’ll just focus on what’s new. Within the upgradeneeded event, I’ve made use of the database variable passed to it (thisDB). One of the properties of this variable is a list of existing object stores called objectStoreNames. For folks curious, this is not a simple array but a “DOMStringList.” Don’t ask me – but there ya go. We can use the contains method to see if our object store exists, and if not, create it. This is one of the few synchronous functions in IndexedDB so we don’t have to listen for the result.
To summarize then – this is what would happen when a user visits your site. The first time they are here, the upgradeneeded event fires. The code checks to see if an object store, “firstOS” exists. It will not. Therefore – it is created. Then the success handler runs. The second time they visit the site, the version number will be the same so the upgradeneeded event is not fired.
Now imagine you wanted to add a second object store. All you need to do is increment the version number and basically duplicate the contains/createObjectStore code block you see above. The cool thing is that your upgradeneeded code will support both people who are brand new to the site as well as those who already had the first object store. Here is an example of this (test5.html):

Liked it? Take a second to support Ranjan on Patreon!
become a patron button
  • Click to share on Reddit (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • More
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - 1181 Views
Tags | javascript
AUTHOR
Ranjan

Namaste, My name is Ranjan, I am a graduate from NIT Rourkela. This website is basically about of what i learnt from my years of experience as a software engineer on software development specifically on mobile application development, design patterns/architectures, its changing scenarios, security, troubleshooting, tools, tips&tricks and many more.

You Might Also Like

js-cheatsheets-advance-operators

JavaScript Objects CheatSheets, Operators & Quantifiers

July 24, 2021
mycodetips-newlogo2

How to create printer friendly web page using javascript

June 2, 2013
Javascript-CheatSheet

JavaScript Cheatsheets or Basics Reference

July 23, 2021
Next Post
Previous Post

Support us

mycodetips mycodetips
Follow us @ LinkedIn 2850+

Subscribe for updates

Join 8,213 other subscribers

Latest Posts

  • YT-Featured-solidprinciples
    SOLID Principles of Software Design
  • IOS 16 Features
    Latest features in IOS 16
  • r-language
    How can R language be used for data analysis?
  • wordpress-coding-blog
    Guide To WordPress Coding Standards
  • YT-Featured-Algorithm
    What is Algorithm?
  • Frameworks of IOS
    Frameworks of IOS – Part ( I )
  • NSFileManager or NSPathUtilities
    NSFileManager or NSPathUtilities in Objective-C
  • Passing data between view controllers in Objective-C
    Passing data between view controllers in Objective-C
  • structures-classes-enum
    Structures and Classes in swift !
  • control-system-swift
    Control Flow in Swift
whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

techlynk

Techlynk

techbyte

Do2Day

techbyte

Techbyte

  • #about
  • #myapps
  • #contact
  • #privacy
  • #Advertise
  • #Guestpost
  • #myQuestions

Android Android Studio API APP Programming Apps blogging CSS DATABASE dsa Features HTML HTML5 installation Interview Questions IOS iPhone javascript Mac objective-c OS Programming quicktips SDK SEO SQL swift Tips & Tricks Tools UI Web Wordpress Xcode

  • SOLID Principles of Software Design
  • Latest features in IOS 16
  • How can R language be used for data analysis?
  • Guide To WordPress Coding Standards
  • What is Algorithm?

©mycodetips.com