Introduction to the Web API (IV): INDEXEDDB API for client storage

Overview

Previous: Introduction to the Web API (III): client-side storage of the Web Storage API

Client storage is about the same as a dynamic website in one respect. Dynamic Web sites use the server to store data, while client-side storage uses the client to store the data.

IndexedDB API is the second method of modern HTML5 client storage.

INDEXEDDB Introduction

INDEXEDDB is specifically designed for a large number of structured data.

INDEXEDDB has these features :

(1) The INDEXEDDB database stores key-value pairs.

(2) INDEXEDDB is a transaction-based database model.

(3) The IndexedDB API is asynchronous in type.

(4) INDEXEDDB uses many requests (requests) and responses.

(5) INDEXEDDB uses the DOM to notify you when the results are returned.

(6) The INDEXEDDB database is an object-type database.

(7) INDEXEDDB does not use SQL.

(8) INDEXEDDB follows the same-origin policy.

INDEXEDDB have these limitations :

(1) Sorting is not supported.

(2) Synchronization operation is not supported. You have to write your own sync operation code.

(3) Full-text search is not supported and like functionality in SQL is not supported.

Storage limits

There are 2 types of storage properties in INDEXEDDB: Permanent type and temporary type.

Permanent data is not limited to permanent storage and is deleted only when the user deletes it.

Temporal data has a global limit and a same-origin limitation. The global limit refers to the total amount of temporary data that is 50% of the total disk. When exceeded, the browser automatically deletes the oldest used data until it can store the data that is currently needed for storage. The same-origin restriction refers to the total amount of temporary data under homology with a limit of 20% of the global limit, but not less than 10M, and no more than 2G. The browser throws an error when the same origin limit is exceeded.

INDEXEDDB Mode of Use

The use of MongoDB is similar to the following:

(1) Open a database.

(2) Create an object store in the database.

(3) Start a transaction and use the request to manipulate the database.

(4) Wait for the transaction to complete by listening for DOM events.

(5) Use the returned data (Request object) to do some work.

Use INDEXEDDB to verify that INDEXEDDB is supported

if (!window.indexedDB) {    window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");}

Open the INDEXEDDB database

var request = window.indexedDB.open("MyTestDatabase", 3);

Where 3 is the version number. The version number cannot be decimal, otherwise it will be rounded to an integer.

Update INDEXEDDB database version

After the request is issued, OnError and onsuccess respond, if the open INDEXEDDB database version is lower than the existing database version, then the onerror will appear. If you open a INDEXEDDB database version that is higher than the version of the database that already exists, you will respond to the onupgradeneeded event.

var request = indexedDB.open(dbName, 2);//存在的数据库版本比2低的时候响应如下事件。request.onupgradeneeded = function(event) {  //数据库在event.target的resule属性里面  var db = event.target.result;  //建立object store，并设立键值  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });  //设定object store的索引name，并设定为可以重复  objectStore.createIndex("name", "name", { unique: false });  //设定object store的索引email，并设定为不可以重复  objectStore.createIndex("email", "email", { unique: true });  };

You can also use AutoIncrement to set a self-growing key value.

//建立object store，并设立自增长的键值，储存在key字段中var objectStore = db.createObjectStore("customers", { autoIncrement: true });

Wait and return to the INDEXEDDB database

var db;request.onerror = function(event) {  alert("Why didn't you allow my web app to use IndexedDB?!");};request.onsuccess = function(event) {  db = event.target.result;};

Occupied pits

Occupied pits

Introduction to the Web API (IV): INDEXEDDB API for client storage