Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the local storage IndexedDB in Html5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

IndexedDB is a low-level API for clients to store large amounts of structured data (including files / blobs). The API uses an index to achieve a high-performance search of the data.

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

For requirements that store only certain fields, you can use Local Storage and Session Storage to do so. But once a large amount of data is stored, Local Storage and Session Storage are far from meeting the demand. At this point, the power of IndexedDB will be reflected.

1. Create or open a database

/ * compatible with indexedDB of different browsers * / const indexeddb = window.indexedDB | | window.webkitIndexedDB | | window.mozIndexedDB | | window.msIndexedDB;/* creates or connects databases * / const request = indexeddb.open (name, version); / / name: database name, version: database version number

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

2. Callback function connecting to the database

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

After connecting to the database, request listens for three states:

Success: database opened or created successfully

Error: failed to open or create database

Upgradeneeded: updating the database

The upgradeneeded state is monitored only when indexedDB creates a new database and when the indexeddb.open (name, version) version (database version number) changes. This state is not triggered when the version number does not change. The creation and deletion of the ObjectStore of the database are all performed under this listening event.

3. Create and delete ObjectStore

In indexedDB, ObjectStore is similar to a table in a database.

Request.addEventListener ('upgradeneeded', function (event) {/ / create database instance const db = event.target.result; / / close database db.close (); / / determine whether there is an ObjectStore db.objectStoreNames.contains (objectStoreName); / / delete ObjectStore db.deleteObjectStore (objectStoreName);}, false)

You can create an ObjectStore as follows

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

4. Addition, deletion, modification and query of data

Request.addEventListener ('success', function (event) {/ / create database instance const db = event.target.result; / / find an ObjectStore db.transaction (objectStoreName, wa); / / when wa is' readwrite', data can read / write / wa is' readonly', data read-only const store = transaction.objectStore (objectStoreName);}, false)

Addition, deletion, modification and query of the database:

/ / add data, store.add (obj) will not be added when keyword exists; / / update data, overwrite data when keyword exists, add data store.put (obj) if it does not exist; / / delete data, delete data corresponding to specified keyword store.delete (value); / / clear ObjectStorestore.clear () / / find data, and find the specified data const g = store.get (value) according to keywords; g.addEventListener ('success', function (event) {/ / callback function after asynchronous lookup}, false)

Find data by index

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

Find data by the range of the index

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

Finally, I encapsulated a library of indexedDB.

This is the end of the article on "how to use local storage IndexedDB in Html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.