Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use IndexedDB". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use IndexedDB.

In-depth study of IndexedDB API and its usage in practice.

Have you ever heard of the NoSQL database on the browser?

IndexedDB is a large NoSQL storage system. It allows you to store almost any content in the user's browser. In addition to the usual search, get, and place operations, IndexedDB also supports transactions.

You can find an example of IndexedDB below.

In this article, we will focus on the following.

Why do we need IndexedDB?

How do we use IndexedDB in our applications?

The function of IndexedDB

Limitations of IndexedDB

Is IndexedDB suitable for your application?

Why do we need IndexedDB?

IndexedDB is considered to be more powerful than localStorage!

Do you know the reason behind it? Let's find out.

Can store a much larger amount of data than localStorage

There are no special restrictions like localStorage (somewhere between 2.5MB and 10MB). The maximum limit depends on the browser and disk space. For example, Chrome-and Chromium-based browsers allow up to 80% disk space. If you have 100GB, IndexedDB can use up to the space of 80GB, and a single origin can use 60GB at most. Firefox allows a maximum of 2GB per origin, while Safari allows a maximum of 1GB per source.

You can store values of any type based on {key: value} pairs

It is more flexible to store different data types. This means not only strings, but also binary data (ArrayBuffer objects, Blob objects, and so on). It uses object storage to store data internally.

Provide a search interface

This is not available in other browser storage options, such as localStorage and sessionStorage.

Useful for Web applications that do not require a continuous Internet connection

IndexedDB is useful for both online and offline applications, for example, it can be used for client storage in progressive Web applications (PWA).

Application status can be stored

By storing application state for frequently used users, you can greatly improve application performance. Later, the application can synchronize with the back-end server and update the application by deferred loading.

Let's take a look at the structure of IndexedDB, which can store multiple databases.

The structure of IndexedDB

How do we use IndexedDB in our applications?

In the following sections, we will examine how to boot the application using IndexedDB.

1. Open a database connection using "window.indexedDB"

Const openingRequest = indexedDB.open ('UserDB', 1)

Here UserDB is the name of the database and 1 is the version of the database. This returns an object that is an instance of the IDBOpenDBRequest interface.

two。 Create object Store

When a database connection is opened, the onupgradeneeded event is triggered, which can be used to create an object store.

/ / create UserDetails object repository and index request.onupgradeneeded = (event) = > {let db = event.target.result; / / create UserDetails object store / / have auto-incrementing ID let store = db.createObjectStore ('UserDetails', {autoIncrement: true}); / / create index let index = store.createIndex (' nic', 'nic', {unique: true}) on the NIC attribute;}

3. Insert data into object storage

Once you have opened a connection to the database, you can manage the data in the onsuccess event handler. Inserting data occurs in four steps.

Function insertUser (db, user) {/ / create a new thing const txn = db.transaction ('User',' readwrite'); / / get UserDetails object store const store = txn.objectStore ('UserDetails'); / / insert new record let query = store.put (user); / / handle successful use case query.onsuccess = function (event) {console.log (event);} / / processing failure use case query.onerror = function (event) {console.log (event.target.errorCode);} / / close the database txn.oncomplete = function () {db.close ();};} after the transaction is completed

Once the insert function is created, the requested onsuccess event handler can be used to insert more records.

Request.onsuccess = (event) = > {const db = event.target.result; insertUser (db, {email: 'john.doe@outlook.com', firstName:' John', lastName: 'Doe',}); insertUser (db, {email:' ann.doe@gmail.com', firstName: 'Ann', lastName:' Doe'});}

Many actions can be performed on IndexedDB, some of which are as follows:

Read / search data from the object store through key

Read / search data from the object store by index

Update record data

Delete record

Migrate from a previous version of the database, etc.

The function of IndexedDB

IndexedDB provides many special features that cannot be achieved by other browser stores, some of which are briefly described below.

With asynchronous API

This allows expensive operations to be performed without blocking UI threads and provides a better experience for users.

Support transactions to ensure reliability

If a step fails, the transaction is cancelled and the database is rolled back to the previous state.

Support for version control

You can version the database when you create it and upgrade it as needed. You can also migrate from the old version to the new version in IndexedDB.

Private domain

The database is a private database of a domain, so no other Web site can access the IndexedDB storage of other Web sites. This is the so-called homologous strategy.

Limitations of IndexedDB

So far, IndexedDB seems promising for client-side storage. However, there are some noteworthy limitations.

Even with the support of modern browsers, browsers such as IE do not fully support it.

Firefox completely disables IndexedDB in private browsing mode-this may cause your application to fail when accessing through an invisible window.

Is IndexedDB suitable for your application?

Based on many of the features provided by IndexedDB, the answer to this multimillion-dollar question may be Yes! However, before coming to a conclusion, ask yourself the following questions.

Does your application need to be accessed offline?

Do you need to store a lot of data on the client side?

Do you need to quickly find / search data in a large amount of data?

Does your application use browsers supported by IndexedDB to access client storage?

Do you need to store all kinds of data, including JavaScript objects?

Does writing / reading from client storage require non-blocking?

If the answer to all the above questions is "yes", then IndexedDB is your best choice. But if you don't need such a feature, you might as well choose a storage method like localStorage, which provides a wide range of browser applications and has an easy-to-use API.

Summary

When we consider all the client-side storage mechanisms, IndexedDB is a clear winner. Let's take a look at the summary and comparison of different client storage methods.

Thank you for your reading, the above is the content of "how to use IndexedDB", after the study of this article, I believe you have a deeper understanding of how to use IndexedDB, 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.