First, include the dart:indexed_db package with a prefix because it contains class names that are already used in dart:html (for example, the Request class):

import 'dart:indexed_db' as idb;

To create or open a database, call:

var db = await window.indexedDB.open('databaseName', version: 1,
    onUpgradeNeeded: onUpgradeNeededCallback
);

The onUpgradeNeededCallback function is called when you're opening a database with this name for the first time or when the version number is higher than the version of the currently existing database that allows you to migrate to a newer database structure.

Records in the database are stored in object stores, which is much like a database table from relational databases. Each database can contain multiple object stores independently on each other. As we'll use the object store name and a reference to our database multiple times in our app, we can create them as object properties:

static const String objectStoreName = 'articles_store';
idb.Database _db;

Creating an object store for our database is very simple:

void onUpgradeNeededCallback(idb.VersionChangeEvent e) {
  idb.Database db = (e.target as idb.Request).result;
  var store = db.createObjectStore(
        objectStoreName, autoIncrement: true);
}

A callback to onUpgradeNeeded is the only place where you can create new object stores. Setting autoIncrement to true makes an object store to take care of generating unique keys for new records inserted to the object store.

All operations in IndexedDB are performed via transactions. The first argument to transaction() is its scope, which can be multiple object stores. The second argument is a mode that can be readonly or readwrite. You can perform multiple readonly operations concurrently but only one readwrite operation at the time.

We're going to simply get a cursor object that points at the beginning of our object store and gets one record at a time. When used as a stream, it fires events for every record in the object store. The autoAdvance parameter set to true makes the cursor automatically move to the next record; otherwise, we would have to call the next() method manually:

loadDataFromDB() async {
  var trans = _db.transaction(objectStoreName, 'readonly'),
  var store = trans.objectStore(objectStoreName);
    
  Map<String, Map<String, String>>dbItems = new Map();
  var cursors = store.openCursor(
      autoAdvance: true).asBroadcastStream();
  // Bind an event which is called for each record.
  cursors.listen((cursor) {
    dbItems[cursor.key] = cursor.value;
  });

  // Wait until all records have emitted their events.
  await cursors.length;
  renderReadLaterItems(dbItems);
}

The renderReadLaterItems() method just renders all records into a list just like the renderReddit() method.

You can, of course, fetch a single record by its key, which, again, returns a Future object:

store.getObject(key)

We need to update the renderReddit() method to handle our onClick event, add a clicked item to the object store, and reload all records:

void renderReddit(UListElement targetUl, List items) {
  var frag = new DocumentFragment();
  for (Map<String, String>item in items) {      
    AnchorElement aElm = new AnchorElement();
      ..text = '[save]';
      ..href = '#';
      ..onClick.listen((e) async {
        e.preventDefault();
        await this._save(item);
        // Let's not worry about performance now.
        loadDataFromDB();
      });

    /* … */
    frag.append(liElm);
  }
  targetUl.children.clear();
  targetUl.append(frag);
}

Here we're meeting Future objects again:

Future _save(Map item) {
  var trans = this._db.transaction(objectStoreName, 'readwrite'),
  var store = trans.objectStore(objectStoreName);
  
  // add() method persists record and returns a [Future] object.
  // Item's key is generated by our object store.
  store.add(item).then((addedKey) => print(addedKey));
  // We're not using await because only the transactions can tell
  // when it's finished. [Future.then()] is just better here.
 // [Transaction.completed] is an instance of [Future].
  return trans.completed;
}

Note that in order to remove a record from the object store, we need to know its database key:

Future _delete(key) {
  var trans = this._db.transaction(objectStoreName, 'readwrite'),
  // Delete record by its generated key.
  trans.objectStore(objectStoreName).delete(key);
  return trans.completed;
}

Similarly, we can remove all records:

trans.objectStore(objectStoreName).clear();

Although we didn't need any indicies in our app, it's worth mentioning how to use them. Just like all operations that modify database structures, we have to define indices in the onUpgradeNeeded callback:

store.createIndex('index_name', 'col_to_index', unique: true);

If we wanted, for example, to search our saved Reddit posts by their title, we would set the index like this:

store.createIndex('title_index', 'title'),

Let's set a search query to filter, say, only those posts that start with the letter R:

var trans = this._db.transaction(objectStoreName, 'readonly'),
var store = trans.objectStore(objectStoreName);
var index = store.index(titleIndex);
    
var range = new idb.KeyRange.lowerBound('R'),
var cursors = index.openCursor(
    range: range, autoAdvance: true).asBroadcastStream();
cursors.listen((cursor) {
  print(cursor.value['title']);
});

This is very similar to fetching all records, as we did a moment ago.

Note that we're opening the cursor over index instead of the entire store and passing a range argument, which is basically our search query. The idb.KeyRange item has four named constructors that you can use:

Compared to any SQL-like database, indices in IndexedDB are very primitive, but thanks to its simplicity, IndexedDB can be available even on mobile devices with very limited resources.

The finalized application can look like the following screenshot. You probably don't want to rewrite all the source code by yourself, so feel free to download the source code for this chapter and see how it's done.

WebSQL was supposed to be a SQL variant that could run in clients' browsers. However, it's been discontinued by W3C and probably won't be supported by any browser in the future because the only available implementation was SQLite.

It's recommended that you use IndexedDB instead.