What is a Indexdb?

In plain English, an IndexedDB is a browser-provided local database that can be created and manipulated by web scripts. IndexedDB allows you to store large amounts of data, provide a lookup interface, and build indexes. These are all things that LocalStorage does not have.

In terms of database type, IndexedDB is a relational database (no SQL query statements are supported) and the data format can be JSON objects.

In short, Indexdb is a database that the front end can use in the browser.

The advantages of Indexdb

  1. Large storage space: There is no upper limit. Generally, the upper limit is not less than 250 MB
  2. Various storage formats:
    • Support for string storage
    • Support for binary storage (ArrayBuffer objects and Blob objects)
    • Support FOR JSON key-value pair storage. An object is equivalent to a table in a relational database, which is called an Object Store.
  3. Asynchronous operation: Better performance. Prevent web pages from being slowed down when reading or writing large amounts of data (localStorage operations are synchronous)
  4. Same-origin restriction: Each database corresponds to one domain name. You can access only the database under its own domain name, but cannot access the database across domains
  5. Support for transactions: If one of the steps fails, the entire transaction is cancelled and the database is rolled back to the state before the transaction occurred. There is no case of overwriting only part of the data

Basic concepts of Indexdb

A, the ObjectStore

ObjectStore IndexedDB is a key-value database. ObjectStore is the data storage mechanism for indexedDB, the same status as SQL tables. Each record contains a key and value.

IndexedDB calls its storage mechanism objectStore, with object in front of Store, because the collection of records it stores, like an object, is a collection of key-values.

Second, the Index

Indexes are the most interesting part of indexedDB, which is why it is called indexedDB. An index is a collection of concepts:

  • The space used to store an index is called an index, for exampleobjectStoreAn index of
  • The index of a record is also called an index, for example, valueindexNameThe index

Simply put, an index is a tool that is independent of objectStore, but bound to objectStore, and used to create more clues to query.

Essentially, oneindexIs a special oneobjectStore, its storage structure andobjectStoreBasically the same, with its own name (marked indexName for this article), keyPath, key, and value. The key of an index has certain logical constraints. For example, unique is used to specify that the key is unique.

ObjectStore = ObjectStore

Index is attached to objectStore. When we create an index, we first get an objectStore and then create an index based on that objectStore. An objectStore can have multiple indexes.

Index is actually a complement to the objectStore query criteria. Without index, we can only look up values by the key in the objectStore, but with index, our ability to query is extended to any property path.

Fourth, the Transaction

The concept of “transactions” exists in all well-structured databases to ensure that there is no confusion when something is not being done.

Transactions in indexedDB ensure that all operations (especially writes) take place in a certain order without causing simultaneous writes. In addition, indexedDB enforces that any read or write operation must be performed in a transaction.

Supplement: because the js is single thread to run the program, so for all transactions, also is to have the order, only when certain transaction is completed, will enter the back when a transaction, so even if a objectStore exists in multiple transactions, it also will appear when the order is operating in accordance with the affairs, instead of crossover operation is different when the affairs. In addition, only one transaction is allowed to write to an objectStore, and it will automatically judge and report errors based on the mode value you pass as readwrite.

When aware of the existence of transactions, it is important to note the life cycle of indexedDB transactions. A transaction executes all the operations that you specify in its lifetime, and once it’s done, the cycle is over, the transaction is closed, and you can’t use the instance of the transaction for further operations.

Five, the Cursor

Although indexedDB uses objectStore to store data, it is a key-value database. However, we have the need to traverse all records. Cursor is the indexedDB interface that allows you to traverse the entire objectStore.

The wrapper library for Indexdb, DL-GLDB

Dl-gldb is an object that contains a series of action wrappers for the IndexDB API. All of the action API implementations return a Promise. The DL-GLDB handles the transaction requirements of Indexdb internally. The user simply calls the method and does not need to worry too much about the internal requirements of Indexdb.

Usage scenarios of Indexdb

  • Cookie: indicates a short-term login. For example, the token expires. You need to set the expiration time and exchange the token after the expiration
  • SessionStorage: one-time login with sensitive accounts
  • LocalStorage: long-term login
  • IndexedDB: Stores a large amount of structured data

For simple data, stick with localStorage; For large volumes of structured data, IndexedDB would be more appropriate. Of course, if you need to set an expiration date for short-term storage, use cookies instead.

The blogger is also planning to use Indexdb to handle large file downloads in his company’s projects. Indexdb can store binary data to implement large file fragmentation downloads and resumable breakpoints. Demo2 in DL-GLDB is also a demo for file slicing storage.

In the future, Indexdb is also planned to be used by bloggers to store page data of specified modules to achieve the effect of local caching of page data.

conclusion

Learn Indexdb, mainly through tang Shuang big brother Indexdb Chinese tutorial blog to learn. The big guy’s documentation is very detailed. Worship ~ ~

For bloggers, the process of learning Indexdb. The concepts of transactions and indexes were difficult to understand at first. The only way to improve your understanding of Indexdb is through demo debugging of each API. Hopefully, Indexdb students will not be put off by its obscure theoretical knowledge. Write more demos or try out the bloggers’ own DL-GLDB library. Thank you very much! !

portal

  • Indexdb Chinese Tutorial by Tang Shuang
  • Dl – GLDB library, welcome to use and suggestions
  • Cat eleven paper box — welcome to exchange and learn together