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

This article mainly explains the "IndexedDB front-end client database how to use", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "IndexedDB front-end client database how to use" it!

IndexedDB introduction

IndexedDB is an object database that can store structured data persistently in browsers, and provides rich query capabilities for web applications.

It is simpler than the Web SQL database, and the work on Web SQL in the official standard has stopped.

Compared to Web Storage,IndexedDB storage space is unlimited and permanent.

Create a database

IndexedDB allocates independent space by domain name. Multiple databases can be created under a single domain name. Each database can create multiple object storage spaces (table / object warehouse), and one object storage space can store multiple object data (indexed fields).

Function openDB () {var request = indexedDB.open (dbName,dbVer); / / open if the database does not exist. If the database does not exist, create a new request.onsuccess = function (e) {} request.onerror = function (e) {} / / create a new database, or start the onupgradeneeded event when the database version number is changed, and execute the callback function request.onupgradeneeded = function (e) {}}

The indexedDB.open method is used to create a database, passing two parameters (database name, database version). The request.onupgradeneeded method is called when a new database is created, or when the database version number is changed.

Create object storage space

Request.onupgradeneeded = function (e) {db = e.target.result; / / determine whether the object repository exists if (! db.objectStoreNames.contains ('Users')) {/ / if the object repository does not exist, create a new object repository (keyPath, primary key) AutoIncrement, whether self-increment), will return an object (objectStore) var store = db.createObjectStore ('Users', {keyPath:'id',autoIncrement:true}); / / specify the fields that can be indexed, whether the unique field is unique, and you can create multiple indexes store.createIndex (' username','username', {unique:false})}}

Store.createIndex creates an index field with three parameters (index naming, index field, whether it is unique)

Transaction (transaction)

Queries and updates to IndexedDB are included in a transaction to ensure that these operations either succeed or fail together.

Function dataHandle (data) {/ / create transaction object var ts = db.transaction ('Users','readwrite'); / / get object repository var store = ts.objectStore (' Users') through transaction object; / / add data var req = store.put (data) to the warehouse; req.onsuccess = function () {}}

Operations on the warehouse store:

Put () adds data, takes the parameter as the object to be saved, and changes the data if the data primary key (keypath) already exists.

Add () adds the data, and the parameter is the object to be saved. If the data primary key (keypath) already exists, the save fails.

Delete () deletes the data, passing in the primary key of the target data. Get () gets the data, and the parameter passed in is the primary key of the target data.

Ergodic data

Retrieve data from the scope of the object repository through the cursor cursor:

Var range = IDBKeyRange.lowerBound (1); / / specify cursor retrieval range var req = store.openCursor (range); / / create cursor dbData = []; req.onsuccess = function () {var cursor = this.result; if (cursor) {dbData.push (cursor.value); cursor.continue (); / / Loop read data until the end} else {}}

Several main methods of IDBKeyRange:

IDBKeyRange.bound (N1, N2, false, false); primary key ranging from N1 to N2. The third and fourth parameter is whether to include N1 or N2.

IDBKeyRange.only (n); range one primary key

IDBKeyRange.lowerBound (n, false); sets of primary keys greater than n

IDBKeyRange.upperBound (n, false); sets of primary keys less than n

Query data

The data that can be queried needs to be indexed by store.createIndex ()

Var store = ts.objectStore ('Users'); var index = store.index ("username"); / / Open database index var range = IDBKeyRange.only (keyName); / / pass a single key (index value) to get range var req = index.openCursor (range)

Delete database

IndexedDB.deleteDatabase ("database name"); thank you for reading, the above is the content of "how to use the IndexedDB front-end client database". After the study of this article, I believe you have a deeper understanding of how to use the IndexedDB front-end client database, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.