HTML5 IndexedDB, Web SQL Database and Browser Wars

I am starting to develop a web application with standalone database storage requirements. In short, the application should be able to work:

  • One of the main desktop browsers preferred by Chrome
  • Safari on iOS
  • Native Android browser (based on V8 and WebKit)

So the question is which technology to choose: IndexedDB or Web SQL Database?

As for the Web SQL database, on the one hand, it is ready for use in any of the above scenarios. Mozilla, on the other hand, said that Firefox would never implement it, and according to the HTML5 working draft, the specification came to a standstill:

This specification has come to a standstill: all interested developers have used the same SQL server (Sqlite), but we need several independent implementations to continue the standardization path. While another developer is not interested in implementing this specification, the SQL dialect description is left just a reference to Sqlite, which is unacceptable for the standard. If you are a developer interested in implementing an independent SQL server, contact the editor so that he can write a specification for the dialect, which allows this specification to move forward.

IndexedDB is an alternative protected by Mozilla, but it will only appear in Firefox 4. Microsoft is interested, and Chrome will support it too. I don't know anything about Apple's plans for IndexedDB.

I personally tend to choose a Web SQL database, but just because I'm used to SQLite, I like the power and expressiveness of SQL, and I understand the relational model. IndexedDB, for me, is uncertainty.

However, I am afraid to bet on the wrong horse. Can we assume that support for the Web SQL database will continue to exist even if IndexedDB becomes the standard?

(Note on CouchDB: Do you also see this as an alternative?)

+41
html5 web-sql indexeddb
Oct 19 '10 at 19:10
source share
6 answers

Given that only WebSQL supports all three of the requirements that you specified, shouldn't your choice be simple? You do not have an understanding of the development roadmap for Safari or Android, so use what you have.

+13
Oct 19 2018-10-19
source share

Well, as with all calculations, the game is an "abstraction."

If you can create an adequate layer that works both in the SQL repository and in the key / value repository, then ideally you are isolated from the problem and can support the corresponding implementation in a particular browser. If your data model and access patterns do not match the lowest common denominator (i.e.K / v Store), then that pretty much solves your problem right there.

If you can use either storage, then work at a decent level of access and approach the problem from this direction.

Reason, just because you have k / v storage at the back end does not mean that you should only model your data as a k / v model. In fact, the entire database is on the backend, this is a k / v-store. If you don’t have a crazy amount of data, you can do a lot. With more data, hoops that you may have to jump over may cost you performance that you may not see with less data. It all depends.

+23
Oct 28 2018-10-10T00:
source share

Is your database significantly outside of key / value stores? If not, I found several javascript packages for local browser-based database abstraction. One such package is jStore:

http://code.google.com/p/jquery-jstore/

I recently used it to add a local keystore / value store. It is well documented, and the integration time was negligible - it supports an array of storages, including flash local storage, through its API.

CouchDB is a great solution - for a problem that doesn't quite match yours. Check out couchone mobile . Not strictly for web applications, but it can provide a database that you could work with if you have some flexibility in the specification.

+6
28 Oct 2018-10-10T00:
source share

Based on your requirement, Safari on iOS has no alternative but WebSQL. WebSQL is supported in another mobile browser, such as Opera and Blackberry. I do not think that they will remove WebSQL support, even if they have IndexedDB. Somehow they complement each other.

On the other hand, during the war with the browser repository, IndexedDB wins forever. IE and FF will only have IndexedDB. The ironic fact is that FF implements IndexedDB on top of Sqlite.

What I would like to say is that IndexedDB is more than just a keystore. It has an index and a transaction. These two only do almost all of the SQL query functions, including union, conditional, and sorting. This is not obvious at first due to its asynchronous API.

IndexedDB performance is better than WebSQL. It is safer. It is more flexible for using javascript. Finally, it is easier to use.

To illustrate this, I will use the sudo code from my library , but you can use the IndexedDB API directly:

In the "people" storage, the "name" field and a list of indexed "hobby" fields are indicated. In JSON,

people = { name: 'Foo Bar', email: 'foo@bar.com' hobby: ['camping', 'swimming']}; 

Get a name from "people" whose hobby is "camping."

 var req = db.keys('people', 'hobby', IDBKeyRange.only('camping')); req.done(function(campers) { db.keys('people', campers, 'name').done(function(names) { console.log(names); }); }); 

Interestingly, this code is not serialized. Therefore, it is very fast.

The following example illustrates a friendship graph request. friendship There is only one specified indexed field friend_list . It uses the key to store people's objects as the primary primary key. people repository of objects has many attributes, including the location field. The query is to find a list of friends who know me and other_guy and are in 'Singapore'.

 var q1 = new ydn.db.Iterator('friendship', 'friend_list', IDBKeyRange.only(me)); var q2 = new dn.db.Iterator('friendship', 'friend_list', IDBKeyRange.only(other_guy)); // if location is not indexed, a filtered value query is used. var q3 = new ydn.db.Iterator('people', new ydn.db.Expression(['"location"', "'Singapore'", '='])); // if location is indexed, an index query is used. // var q3 = new ydn.db.Iterator('people', 'location', IDBKeyRange.only('Singapore')); var current_loop = 2; // start from inner loop var join_algo = function(keys, index_keys) { var advancement = []; advancement[keys.length - 1] = null; var has_adv = false; for (var i = 0; i < keys.length; i++) { if (!goog.isDef(keys[i])) { // completed iterator if (i != 0) { advancement[i] = false; // request to restart the iteration advancement[i - 1] = true; // advance outer iterator current_loop = i - 1; } // i == 0 means we are done. has_adv = true; break; } } if (!has_adv) { // continue looping current advancement[current_loop] = true; } return advancement; } var result = db.scan([q3, q1, q2], join_algo); result.done(function(keys, index_keys, values) { console.log(values); // should get desire list of friends }); 

Again this connection request is just a key scan and therefore very fast. By default, scan use the sorted-merge algorithm to find matching keys, but the naive algorithm for combining nested loops is shown here. Thus, joining a table is possible, but you need to code a join algorithm. But newer algorithms, such as merging zigzags, are faster than possible with Sqlite, because all inputs are sorted, cursors can move well, and more importantly, the connection process can use external knowledge that is not in the database. With SQL, the join operation is opaque.

In addition, IndexedDB can use methods such as streaming and map / reduction.

+5
Nov 11
source share

My recommendation is to switch to IndexDB because there is IndexDB Polyfill available.

All browsers that support WebSQL can support the IndexDB API in this way. Another way would be very difficult to implement, so if you want to reach all browsers that know about some of the database APIs, today the best choice is IndexDB.




Note. Even if this question is old, it still matters, so I think the answers to this question are worth updating. And sorry for the link-only solution, so I only added links to the usually long-lasting destinations: W3C and GitHub

+5
Aug 09 '13 at 10:21
source share

I answer this in 2016 (5 years after you asked this question), and everything regarding the depreciation of WebSQL is still worth it . IndexedDB, on the other hand, is supported by all major browser providers .

Thus, anyone who may be here, faced with the same solution, go to IndexedDB.

As implied by others here, such a decision does not have to be made; you can simply select (or create) a library that uses any available database on the client machine.

BakedGoods differs from such libraries that are already offered here in several ways; in the most appropriate way, it allows you to use a type of storage that must be explicitly defined, in turn, allowing the developer to introduce other factors (such as performance characteristics) into the decision-making process.

At the same time, conducting storage operations depending on what type of database is supported, is a question ...

... with the corresponding operation parameters and equivalent configurations for both types of databases:

 //If the operation is a set(), and the referenced structures //don't exist, they will be created automatically. var webSQLOptionsObj = { databaseName: "Example_DB", databaseDisplayName: "Example DB", databaseVersion: "", estimatedDatabaseSize: 1024 * 1024, tableData: { name: "Main", keyColumnName: "lastName", columnDefinitions: "(lastName TEXT PRIMARY KEY, firstName TEXT)" }, tableIndexDataArray: [name: "First_Name_Index", columnNames: "(firstName)"] }; var indexedDBOptionsObj = { databaseName: "Example_DB", databaseVersion: 1, objectStoreData: { name: "Main", keyPath: lastName, autoIncrement: false }, objectStoreIndexDataArray: [ {name: "First_Name_Index", keyPath: "firstName", unique: false, multiEntry: false} ], }; var optionsObj = { conductDisjointly: false, webSQL: webSQLOptionsObj, indexedDB: indexedDBOptionsObj }; 

... and performing the operation:

 bakedGoods.set({ data: [ {value: {lastName: "Obama", firstName: "Barack"}}, {value: {lastName: "Biden", firstName: "Joe"}} ], storageTypes: ["indexedDB", "webSQL"], options: optionsObj, complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){} }); 

Its simple interface and unrivaled storage support are paid for due to lack of support for some storage-related configurations. For example, it does not support storage operations in WebSQL tables using multiple primary key columns.

So, if you make heavy use of those types of functions, you might want to look elsewhere.

Oh, and for complete transparency, BakedGoods is really supported by yours :).

+4
Jul 08 '16 at 23:00
source share



All Articles