HTML and CSS Reference
In-Depth Information
Chapter 11
Indexed DB
As browser technology has evolved, providing more and more functionality on the client device, the need to
store and manipulate data locally has increased as well. To address this need, two competing technologies have
emerged:
•
Web SQL - An SQL engine hosted within the browser.
•
Indexed DB - An API for storing and retrieving objects using keys and indices.
■
In November 2010, the W3C Working Group decided to stop work on Web SQL and it is no longer part of
the HTML5 specifications. Several browsers still support it however, but its adoption as a cross-platform standard is
unlikely.
Note
This chapter will demonstrate how to use Indexed DB to store and use data on the client. If you are used to
working with SQL databases, I will warn you, this is not an SQL database. It is quite powerful and useful once
you get the hang of it but you'll need to adjust your perspective and set aside your SQL experience as you work
through this chapter.
To explore the capabilities of Indexed DB you will re-write the chess board application that you created using
canvas in Chapter 10. As I explain each of the exercises I will not go into much detail about canvas; however, refer
to Chapter 10 if you need more information. Your new version of the application will create object stores to define
the positions of each piece and then manipulate this data as the pieces are moved.
Introducing Indexed DB
Before I get started with the detailed demonstration, there are a few key points that I think will help you better
understand how Indexed DB works. Like other databases, the data is placed in a persistent data store. In this case
on the local hard drive. The data is permanent.
Using Object Stores
The primary storage unit is called an object store. This is aptly named as they are simply a collection of objects
that are referenced by a key. You can think of this as a set of name-value pairs, the value being an object with a set
of properties. You can use an
in-line
key, where one of the object properties serves as the key. For example, if the
object has an
id
property with unique values, you can use that as the in-line key. If you use
out-of-line
keys, then
