HTML and CSS Reference
In-Depth Information
• How to store new data in an IndexedDB database
• How to delete single data items from an IndexedDB database
• How to clear an entire data store from an IndexedDB database
As you learn how to use the database services of IndexedDB and Web SQL, you'll also
implement the UI for the Add Task and Task List views. Overall, building out the UI and
application features happens in eight steps:
• Step 1: Detect IndexedDB or Web SQL.
• Step 2: Connect to the database and create an object store.
• Step 3: Develop the UI for the Task List view.
• Step 4: Implement a search engine for the database and display search results.
• Step 5: Implement the search interface for the Task List view.
• Step 6: Add new tasks from the Add Task view to the database.
• Step 7: Update and delete tasks from the Task List view.
• Step 8: Drop the database to clear all tasks.
5.3.1. Detecting database support on a browser
Before you can create a database, you need to detect what database system is running with-
in a browser. Currently two systems can be found: IndexedDB and Web SQL. Detection of
the database system is done by assigning a variable to a logical expression of alternating
or
operators (
||
) and vendor-prefixed
IndexDB
object identifiers. Because IndexedDB
isn't a standard feature, you must use the vendor prefixes to access the database system ob-
ject on the various browsers.
If a database object is found, the application saves the found database object to a variable
for later use; otherwise, the application assigns a
false
value to the variable. You also
need to find and save the database key range. We'll discuss the key range later in the sec-
tion.
Step 1: Detect IndexedDB or Web SQL
Now, to add feature detection to the sample application, add the code from the following
listing to the app.js file. This code should be added immediately after the code you inserted
in the previous section.
