Html5 local storage indexeddb

INDEXEDDB is a low -level API that stores a large number of structured data (including file/ blobs) for client storage. The API uses an index to achieve high -performance search for the data.

Recently, there is a business needs that can store data offline, and the form and pictures can be uploaded when there are network signals. So I studied the INDEXEDDB of HTML5.

For the needs of only storage of certain fields, Local Storage and Session Storage can be used to complete. But once a large amount of data is stored, Local Storage and Session Storage are far from meeting the needs. At this time, the strength of IndexedDB will be reflected.

 /* Compatible with different browsers' indexeddb*/const indexeddb = window.indexeddb || Window.webkitindexeddb || Window.mozindexeddb || Window.msindexedb;/* Create or connect data Library*/const repuest = indexeddb.open (name , version); // name: database name, version: database version number

Because IndexedDB is compatible on different browsers, we need a part of the function to be compatible with IndexedDB.

 Request.adDeventListener ('Success', Function (Event) {// Open or create database success}, FALSE); request.addeventListener ('Error', Function (Event) {// Open or create a database failure failure }, FALSE); Request.adDeventristener ('Upgradeneeded', Function (Event) {// When updating the database}, FALSE);

After connecting to the database, Request will listen to three states:

• Success: Open or create a database success
• error: Failure to open or create a database
• Upgradeneeded: Update the database

The UpgradneedEd state is to monitor this state when indexedddb creates a new database and indexedb.open (name, version) Version (database version number). When the version number does not change, this state will not be triggered. The creation and deletion of the ObjectStore of the database are performed under this monitoring event.

In IndexedDB, ObjectStore is similar to the database table.

 Request.adDeventListener ('Upgradeneeded', Function (Event) {// Create a database instance const db = event.target.Result; // Turn off the database db.close (); // bkystorenames.contains (ObjectStoreName ); // Delete ObjectStore db.deleteObjectStore (ObjectStoreName);}, FALSE);

You can use the following method to create an ObjectStore

 Request.adDeventListener ('Upgradeneeded', Function (EVENT) {// Create a database instance const db = EVENT.TARGET.Result; // Determine whether there is ObjectStore if (! DB.ObjectStorenames. contains (ObjectStoreName) {const store = db .createObjectStore (ObjectStorename, {keypath: keypath // keypath as search keywords as ObjectStore}); // Create an index Store.CreateINDEX (name, // index INDEX, // / Key value {unique: unique // whether the index is Unique});}}, false);

 Request.adDeventListener ('Success', Function (Event) {// Create a database instance const db = event.target.Result; // Find an ObjectStore db.transaction (ObjectStoreName, WA ); // WA is 'ReadWrite', When the data can be read and write // when the data is 'readonly', the data reads only the const store = transaction.objectStore (objectStoreName);}, false);

Database addition, deletion and change:

 // Add data. When the keyword is existed, the data will not be added with Store.add (obj); // Update the data, cover the data when the keyword is existed, and the data store.put (obj) is added when there is no existence; // Delete Data, delete the corresponding data store.delete (value) corresponding to the specified keywords; // Clear objectStoreStore.clear (); // Find the data, find the specified data const g = state.get (value) according to the keyword; g. addeventListener ('Success', Function (EVENT) {// The callback function}, false);

Find data according to indexes

 Const index = Store.index (Indexname); const Cursor = Index.opencursor (Range); Cursor.adDeventListener ('Success', Function (EVENT) {Const Result = EVEN t.Target.Result; if (result) {result.value // data result.continue (); // iteration, migration downward}}, false);

Find data according to the scope of the index

 const index = Store.index (indexname); const cursor = Index.opencursor (Range);/*** Range is null, find all data as a specified value, find the corresponding data of the index to meet the condition* Range When the IDBKEYRANGE object is the data of the specified range of the specified range of the condition according to the conditions*/// larger than or more than or equal to the range = idbKeyrange.lowerbound (value, true) // (Value, +∞),> ValueRange = IDBKEYRANGE. LOWERBBB OUND (Value , FALSE) // [Value, +∞),> = Value // smaller than or less, ISOPEN: TRUE, open interval; false, closed interval range = idbKeyrange.UPPERBOUND (Value, isOpen) // greater than or equal to value1 , Smaller than or equal to Value2idBKEYRANGE.BOUND (Value1, Value2, Isopen1, Isopen2)

Finally, a library of indexeddb is encapsulated by myself. You can refer to: DUAN602728596/IndexedDB

The above is the IndexedDB of the HTML5 local storage introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!