This is the 20th day of my participation in the August Text Challenge.More challenges in August

When using some browser storage solution, such as storage or cookies, you must have seen something called IndexedDB, which is a new browser-built database in the HTML5 specification. IndexedDB can provide database-like storage and usage. We know that sessionStorage and cookies are not persistent storage, and localStorage has a certain size limit, so IndexedDB makes up for the other solutions. It can be used in both online and offline mode.

A scenario using IndexedDB

IndexedDB is clearly the preferred browser storage solution for Web applications with large data stores. Its API is invoked asynchronously, data is stored using indexes, and all database operations are performed in transactions. For simple data storage, such as localStorage, it uses key-value pairs to store data. Therefore, it is preferred to use localStorage for simple data. IndexedDB is more suitable for large data processing operations.

Browser support

To determine whether the current browser environment supports IndexedDB, use the following code as an example:

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

if(!window.indexedDB){
    console.log("Your browser does not support IndexedDB");
}
Copy the code

Basic method of use

Open a database

Using an IndexedDB database requires opening the database, using the.open method, which takes two parameters, the database name and the database version. Example:

var db;
let request = window.indexedDB.open('databaseName');

request.onerror = event= > {
    console.log("Failed to open local indexedDB store")
}

request.onsucess = event= > {
	db = event.target.result;
}
Copy the code

If the database named databaseName does not exist, it will be created automatically and the onupgradneeded event will be triggered. In some browsers, users are alerted when using IndexedDB storage for the first time and can choose to allow or deny access. IndexedDB is completely disabled in browser privacy mode.

Data manipulation

Manipulation of data needs to be done on a transactional basis and requires read and write permissions. Example:

// Create transaction with mode readwrite
var transaction = db.transaction(["students"]."readwrite");
transaction.oncomplete = function(event) {
    console.log("Success");
};

transaction.onerror = function(event) {
    console.log("Error");
}; 
Copy the code
The new data
var objectStore = transaction.objectStore("students");
objectStore.add({rollNo: rollNo, name: name});
Copy the code
Delete the data
db.transaction(["students"]."readwrite")
.objectStore("students")
.delete(rollNo);
Copy the code
Update the data
var transaction = db.transaction(["students"]."readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
	request.result.name = name;
    objectStore.put(request.result);
};
Copy the code

Three modes of transaction

  • Versionchange: Changes the database model or interface, including creating or deleting object repositories or indexes
  • Readonly: read-only
  • Readwrite: reading and writing

Welcome to other articles

  • Internationalize your website with Vite2+Vue3 | August Update Challenge
  • Actual combat: The front-end interface request parameters are confused
  • Practice: Implement a Message component with Vue3
  • Actual combat: Vue3 Image components, incidentally support lazy loading
  • What updates does One Piece, vue.js 3.0 bring
  • An article digests the major new features of ES7, ES8, and ES9
  • Common problems and solutions for technical teams
  • Introduction to 10 common new features in ES6
  • Vue3 script Setup syntax is really cool