• Home
  • Basics
  • DSA
  • MAD
  • Concept
  • Practice
  • Misc
  • Tips
  • QA’s
  • Home
  • Basics
  • DSA
  • MAD
  • Concept
  • Practice
  • Misc
  • Tips
  • QA’s
  • #News
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk
  • #Interview
  • #Tips

MyCodeTips mycodetips-newlogocopy1

  • Home
  • Basics
  • DSA
  • MAD
  • Concept
  • Practice
  • Misc
  • Tips
  • QA’s
Tips&Tricks

Opening a database in HTML5

This database is local to the browser and only available to the user. IndexedDB databases follow the same rules as cookies and local storage. A database is unique to the domain it was loaded from. So for example, a database called “Foo” created at foo.com will not conflict with a database of the same name at goo.com. Not only will it not conflict, it won’t be available to other domains as well. You can store data for your web site knowing that another web site will not be able to access it.

Opening a database is done via the open command. In basic usage you provide a name and a version. The version is very important for reasons I’ll cover more later. Here’s a simple example: var openRequest = indexedDB.open(“test”,1);
Opening a database is an asynchronous operation. In order to handle the result of this operation you’ll need to add some event listeners. There’s four different types of events that can be fired:
1-success
2-error
3-upgradeneeded
4-blocked

You can probably guess as to what success and error imply. The upgradeneeded event is used both when the user first opens the database as well as when you change the version. Blocked isn’t something that will happen usually, but can fire if a previous connection was never closed.
Typically what should happen is that on the first hit to your site the upgradeneeded event will fire. After that – just the success handler. Let’s look at a simple example (test3.html).

var idbSupported = false;
var db;

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

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

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

openRequest.onupgradeneeded = function(e) {
console.log(“Upgrading…”);
}

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

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

}

},false);
Once again we check to see if IndexedDB is actually supported, and if it is, we open a database. We’ve covered three events here – the upgrade needed event, the success event, and the error event. For now focus on the success event. The event is passed a handler via target.result. We’ve copied that to a global variable called db. This is something we’ll use later to actually add data. If you run this in your browser (in one that supports IndexedDB of course!), you should see the upgrade and success message in your console the first time you run the script. The second, and so forth, times you run the script you should only see the success message.

  • 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 Admin Blogger - October 8, 2013 - 1463 Views
Tags | javascript
AUTHOR
Admin Blogger

This website is basically about of what we learnt from my years of experience as a software engineer on software development specifically on mobile application development, design patterns/architectures and its changing scenarios, security, troubleshooting, tools, tips&tricks and many more.

You Might Also Like

Javascript-basics

JavaScript: Really I Know You?

July 22, 2021
js-cheatsheets-advance-methods

JavaScript Methods & Properties CheatSheets

July 25, 2021
mycodetips-newlogo2

How to change colour of font using javascript

September 24, 2013
Next Post
Previous Post

Support us

Subscribe for updates

Join 8,276 other subscribers

Latest Posts

  • primitive-datatypes-new
    Exploring the Pros and Cons of Primitive Data Types
  • best practice clean code
    Essential Coding Standards and Best Practices for Clean Code
  • YT-Featured-Templates--lld
    What Business Problems Solves in Low Level Design (LLD)
  • SRP-SingleResopnsibility
    SRP : Single Responsibility Principle in Swift and Objective-C
  • Designing Mobile APPS
    Limitation and restriction of designing mobile apps
whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

do2day

Do2Day

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

.Net Android Blogging Cloud Concept Database DSA ERROR ExcelTips Flutter Interview IOS IOSQuestions JAVA Javascript MAC-OS No-Mouse Objective-c Programming Quick Tips SEO Software Design & Architecture Swift SwiftUI Tips&Tricks Tools Troubleshoot Videos Web Wordpress Xamarin XCode

  • Exploring the Pros and Cons of Primitive Data Types
  • Essential Coding Standards and Best Practices for Clean Code
  • What Business Problems Solves in Low Level Design (LLD)
  • SRP : Single Responsibility Principle in Swift and Objective-C
  • Limitation and restriction of designing mobile apps
MyCodeTips

©mycodetips.com