• Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
  • Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
  • #Deals
  • #News
  • #WiKi
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk

MyCodeTips mycodetips-newlogocopy1

  • Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • 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):

  • 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)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - 1001 Views
Tags | javascript
AUTHOR
Ranjan

I m Ranjan and Sharing my years of experience in Software Development. Love to code in Mobile apps (IOS, Android, Power Apps, Xamarin, Flutter), Machine Learning ( Beginner ), Dot Net, Databases ( SQL Server, MySql, SQLite), WordPress, Cloud Computing ( AWS, Azure, Google, MongoDB) and many more as required on project-specific. Besides this love to travel and cook.

You Might Also Like

mycodetips-newlogo2

How to create printer friendly web page using javascript

June 2, 2013
HTML Cheatsheets or References

HTML Cheatsheets or References

July 18, 2021
js-cheatsheets-advance-methods

JavaScript Methods & Properties CheatSheets

July 25, 2021
Next Post
Previous Post

Subscribe for updates

Join 5,734 other subscribers

whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

techlynk

Techlynk

techbyte

Do2Day

techbyte

Techbyte

Latest Posts

  • 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
  • swift-concurrency-await
    Concurrency in Swift
  • time-complexity-dsa
    The Term Time Complexity in DSA
  • objective-c-datatypes1
    Objective-C Data Types
  • Convert-jpeg-word
    Convert JPG to Word – Tips You Should Try!
  • objective-c-control-statements2
    Objective-C control statements and loops !

Quick Links

  • #about
  • #myapps
  • #contact
  • #privacy

Other Websites

  • #myQuestions
  • #myBhojanalaya
  • #gadgetFacts
  • #ifscCodesDB

Tag Cloud

Android Android Studio API APP Programming Apps ARC asp.net blogging Browser Config CSS DATABASE DFD error Features GUI HTML HTML5 IDE IIS installation Interview Questions IOS iPhone javascript Mac objective-c OneDrive OS Programming quicktips SDK SEO Settings SMO SQL swift swiftUI Teams Tips & Tricks Tools UI Web Wordpress Xcode

©mycodetips.com