IndexedDB

Odin Hørthe Omdal, Opera Software

IndexedDB

Opening a database

open takes the database name and the version.

open("things")
Opens the newest database version.
open("things", 3)
Opens the version 3.

Opening a fresh database

			    var open_request = indexedDB.open("mydb")
			    open_request.onupgradeneeded = function() { // create }
			    open_request.onsuccess = function() { // opened }

Opening the same database again

			    var open_request = indexedDB.open("mydb")
			    open_request.onupgradeneeded = function() { // notrun }
			    open_request.onsuccess = function() { // opened }

Storing stuff

I have this data I want to store:

Name Gender Since Role
Princess Zelda Female 1986 goodie
Ganon Male 1986 baddie
Saria Female 1998 goodie
Navi Female 1998 goodie
			    zelda_people = [
			      { name: 'Princess Zelda', gender: 'f',
			          since: 1986, baddie: false },
			      { name: 'Ganon', gender: 'm',
			          since: 1986, baddie: true },
			      { name: 'Saria', gender: 'f',
			          since: 1998, baddie: false },
			      { name: 'Navi',  gender: 'f',
			          since: 1998, baddie: false }
			    ]

Identifying a record

Two main ways to identify a record, in-line and out-of-line key: 

			    add({ name: "Odin" })
			    add({ name: "Odin" }, "My Custom Key")
			    add("Odin", 1337)

Where is the in-line key?
Look along the keyPath

			    var obj = {
			      name: "Odin",
			      infoz: {
			        height: 172
			      }
			    }
keyPath Key
"name" "Odin"
"infoz.height" 172
"whatever" undefined
"" Full object (invalid)

Important concepts in the database

  • Object stores
    • keyPath
    • autoIncrement
  • Indeces
    • keyPath
    • unique
    • multiEntry

Opening (creating) a fresh database

			    var open_request = indexedDB.open("zelda")
			    open_request.onupgradeneeded = function() { // create }
			    open_request.onsuccess = function() { // opened }

Actually storing stuff in the database

			    open_request.onupgradeneeded = function(e) {
			      db = e.target.result
			      var s = db.createObjectStore("people",
			                  { keyPath: "name" })
			      s.createIndex("first_apperance", "since")
			      s.createIndex("sex", "gender")
			    }

Specifying the keyPath

			    createObjectStore("people", { keyPath: "name" })
			    createIndex("first_apperance", "since")

Adding data

Where does your data come from?

  1. Pre-known data (known on creation, always there)
  2. User data / external data

After the upgrade/creation

			    var open_request = indexedDB.open("zelda")
			    open_request.onupgradeneeded = function() { // the code }
			    open_request.onsuccess = function() {
			      db = e.target.result
			      // Set data event handlers etc
			    }

Data entry

			    button.onclick = function(e) {
			      var txn = db.transaction("people", "readwrite")
			      var store = txn.objectStore("people")
			      store.add(getValue())
			    }

Data entry

			    button.onclick = function(e) {
			      var txn = db.transaction("people", "readwrite")
			      var store = txn.objectStore("people")
			      store.add(getValue())
			    }

In the Middle

Fit to width

Code Sample

				<html lang="en-US">
				<head>
				    <title>Shower</title>
				    <meta charset="UTF-8">
				    <link rel="stylesheet" href="s/screen.css">
				    <script src="j/jquery.js"></script>
				</head>

Code Notes

				<html lang="en-US">

May or may not crash your browser

				<meta charset="UTF-8">

Lock up your machine

Warning
Message

Demo

Block Quote

This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive.

Shower Presentation Template

Vadim Makeev, Opera Software

Shower: github.com/pepelsbey/shower