Indexed DB Beginner's Guide (1)

In HTML 5, one of the notable new features is that it allows the use of indexed DB. Users can learn more about the indexed DB standard from this link (http://www.w3.org/TR/IndexedDB/). In this article, a simple introductory introduction to indexed DB is made.

Overview

Essentially, INDEXEDDB allows users to save large amounts of data in a browser. Any application that needs to send large amounts of data can benefit from this feature, which can store the data on the user's browser side. Currently this is just one of the features of INDEXEDDB, INDEXEDDB also provides a powerful index-based search API to get the data users need.

Users may ask: what is the difference between INDEXEDDB and other previous storage mechanisms (such as cookie,session)?

Cookies are the most commonly used browser-side mechanism for storing data, but their data is limited in size and has privacy implications. Cookies and send data back and forth in each request, completely without the advantage of client data storage.

Take a look at the features of local storage native storage mechanisms. The Local storage has good support in HTML 5, but it is still limited in terms of total storage. The local storage does not provide a true "retrieval API", and locally stored data is accessed only by key-value pairs. The Local storage is suitable for specific scenarios where data needs to be stored, such as user preferences, while INDEXEDDB is more suitable for storing data such as ads (it is more like a real database).

Before we go further into indexed db, let's look at the current mainstream browser support for indexed db. INDEXEDDB is still a candidate for a world-class proposal, and the specification is still satisfying at this point, but is now looking for feedback from the developer community. The specification may be subject to change in response to the recommendations of the consortium prior to the final confirmation phase. In general, the current browser support for INDEXEDDB is implemented in a more unified manner, but developers should be aware of future updates and make certain changes.

Let's take a look at the charts from caniuse.com for each browser's support for INDEXEDDB, as you can see, the current desktop browser support is good, but the mobile browser support is relatively small:

Chrome for Android supports INDEXEDDB, but few people currently use the browser on Android devices. Does the lack of support for mobile browsers mean that it should not be used? Of course not! Fortunately, our developers understand the concept of continuous improvement. Features like INDEXEDDB can be added to browsers that do not support this feature in other ways. Users can use the Wrapped class library to switch to Websql on the mobile side, or simply not to store data locally on the mobile side. I personally think that the ability to cache large amounts of data on the client side is an important feature for use, even with the lack of mobile support.

Start learning

First of all, before using INDEXEDDB, it is necessary to check whether the current browser supports INDEXEDDB, just use the following code to implement:

Document.addeventlistener ("domcontentloaded", function () {       if ("IndexedDB" in window) {         console.log ("YES!!! I CAN do IT!!! Woot!!! ");     } else {         Console.log ("I have a sad.");     }   

　　

In the above code, the Domcontentloaded event is used to load the process, by judging whether there is indexeddb in the Window object, of course, in order to remember the final result of the judgment in the next procedure, you can use the following code to better Save:

var idbsupported = false; Document.addeventlistener ("domcontentloaded", function () {if ("IndexedDB" in window) {idbsupported = true;}},false);

　　

manipulating databases

Here is how to operate the INDEXEDDB database. The first thing to understand is that INDEXEDDB does not require additional installation as traditional SQL Server does. Indexed is present on the browser side and can be accessed by the user control. Indexeddb and cookies are the same as the local storage principle, that is, a indexeddb is associated with a unique domain. For example, the database named "foo" is associated with foo.com and will not conflict with the "foo" database created by goo.com because they belong to different domain, and they are not accessible to each other.

Opening a database is performed by command. The basic usage is to provide the name and version number of the database, where the version is very important and will be parsed later. Here are the basic examples:

Opening a INDEXEDDB database is an asynchronous operation. To handle the return of the operation, you need to increase the listening of some events, there are currently four different types of event listener events:

• Success
• Error
• upgradeneeded
• Blocked

You may already be able to tell the meaning of success and error events. The upgradeneeded event is triggered when the database is first opened or the database version is changed. The blocked event is triggered when the previous connection is not closed.

Let's take a look at the next example, where the upgradeneeded event is triggered when the site is first visited, and then the success event.

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);         }       }   

　　

Indexed DB Beginner's Guide (1)