IndexedDB and html5indexeddb for HTML5 Local Storage

IndexedDB and html5indexeddb for HTML5 Local Storage

IndexedDB is a low-level API used by clients to store large volumes of structured data (including files/blobs ). This API uses indexes to achieve high-performance search for the data.

Recently, a business requirement is that data can be stored offline, and forms and images can be uploaded when network signals exist. So I studied the IndexedDB of HTML5.

Local Storage and Session Storage can be used to store only some fields. However, once a large amount of data is stored, Local Storage and Session Storage are far from enough. In this case, the strength of IndexedDB will be reflected.

1. Create or open a database

/* Compatibility with indexedDB of different browsers */const indexeddb = window. indexedDB | window. webkitIndexedDB | window. optional indexeddb | window. msIndexedDB;/* Create or connect to the database */const request = indexeddb. open (name, version); // name: Database name, version: database version number

Because indexedDB is compatible with different browsers, we need some compatible functions to be compatible with indexedDB.

2. Callback functions connected to the database

Request. addEventListener ('success', function (event) {// opened or created successfully}, false); request. addEventListener ('error', function (event) {// failed to open or create database}, false); request. addEventListener ('upgradeneeded', function (event) {// executed when updating the database}, false );

After connecting to the database, the request will listen to three statuses:

• Success: the database is successfully opened or created.
• Error: failed to open or create database
• Upgradeneeded: update database

The upgradeneeded status can be monitored only when the indexedDB. open (name, version) version (database version) changes when the indexeddb creates a new database. This status is not triggered when the version number does not change. The creation and deletion of the database's ObjectStore are all executed under this listener event.

3. Create and delete ObjectStore

In indexedDB, ObjectStore is similar to a database table.

Request. addEventListener ('upgradeneeded', function (event) {// create a database instance const db = event.tar get. result; // closes the database. close (); // determine whether ObjectStore db exists. objectStoreNames. contains (objectStoreName); // Delete ObjectStore db. deleteObjectStore (objectStoreName) ;}, false );

You can use the following method to create an ObjectStore

Request. addEventListener ('upgradeneeded', function (event) {// create a database instance const db = event.tar get. result; // determine whether ObjectStore if (! Db. objectStoreNames. contains (objectStoreName) {const store = db. createObjectStore (objectStoreName, {keyPath: keyPath // keyPath serves as the search keyword} of ObjectStore); // creates an index store for ObjectStore. createIndex (name, // index, // key value {unique: unique // unique index}) ;}, false );

4. add, delete, modify, and query data

Request. addEventListener ('success', function (event) {// create a database instance const db = event.tar get. result; // search for an ObjectStore db. transaction (objectStoreName, wa); // When wa is set to 'readwrite', the data can be read and written. // When wa is set to 'readonly', the data read-only const store = transaction. objectStore (objectStoreName) ;}, false );

Add, delete, modify, and query databases:

// Add data. If a keyword exists, no store is added for the data. add (obj); // update data. If a keyword exists, data is overwritten. If no keyword exists, a data store is added. put (obj); // delete data to delete the data store corresponding to the specified keyword. delete (value); // clear ObjectStorestore. clear (); // search for data and search for the specified data const g = store based on the keyword. get (value); g. addEventListener ('success ', function (event) {// callback function after asynchronous search}, false );

Search data by index

Const index = store. index (indexName); const cursor = index. openCursor (range); cursor. addEventListener ('success', function (event) {const result = event.tar get. result; if (result) {result. value // data result. continue (); // iteration, move the cursor down}, false );

Search data by index range

Const index = store. index (indexName); const cursor = index. openCursor (range);/*** when range is null, search for all data * When range is the specified value, find the data corresponding to the index meeting this condition * When range is an IDBKeyRange object, search for data in the specified range that meets the condition according to the condition * // The data is greater than or equal to range = IDBKeyRange. lowerBound (value, true) // (value, + ∞),> valuerange = IDBKeyRange. lowerBound (value, false) // [value, + ∞),> = value // less than or equal to, isOpen: true, open range; false, closed range = IDBKeyRange. upperBound (value, isOpen) // greater than or equal to value1, less than or equal to value2IDBKeyRange. bound (value1, value2, isOpen1, isOpen2)

Finally, I encapsulated an indexedDB database. For details, refer to duan602728596/IndexedDB.

The above is a small part of the local storage of HTML5 IndexedDB, hope to help you, if you have any questions, please leave a message, the small part will reply to you in a timely manner. Thank you very much for your support for the help House website!