This repository has been archived by the owner on Feb 16, 2023. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update README.md to reflect current state.
- Loading branch information
Showing
1 changed file
with
2 additions
and
108 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,117 +1,11 @@ | ||
<!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
**Table of Contents** | ||
|
||
- [indexed-db-observers](#indexed-db-observers) | ||
- [Polyfill](#polyfill) | ||
- [Usage](#usage) | ||
|
||
<!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
|
||
# indexed-db-observers | ||
Prototyping and discussion around IndexedDB observers. | ||
|
||
* [Explainer & FAQ](EXPLAINER.md) **<-- read this for details & spec changes** | ||
* [Examples](https://dmurph.github.io/indexed-db-observers/) | ||
Please see the **[Explainer & FAQ](EXPLAINER.md)** for use cases, spec changes, and feature explanation. | ||
|
||
# Polyfill | ||
The polyfill is located here: | ||
```html | ||
<script src="//dmurph.github.io/indexed-db-observers/polyfill.js"></script> | ||
``` | ||
|
||
**It is currently out of date, as the spec has been changing a bit. I'll update it when the spec has settled.** | ||
|
||
**PLEASE SEE EXPLAINER.MD FOR UP-TO-DATE INFORMATION** | ||
The polyfill is currently out of date. | ||
|
||
Caveats: | ||
* It doesn't broadcast changes across browsing contexts. | ||
* Not very memory efficient. | ||
|
||
# Usage | ||
The function `IDBTransaction.observe(function(changes){...}, options)` will be added. | ||
|
||
You can drop this into your web page right now (with small customization) and it should work: | ||
```html | ||
<script src="//dmurph.github.io/indexed-db-observers/polyfill.js"></script> | ||
<script> | ||
// ##### START BOILERPLATE ###### | ||
var db; | ||
var databaseName = 'database'; | ||
var objectStoreName = 'store1'; | ||
var req = indexedDB.open(databaseName); | ||
req.onupgradeneeded = function() { | ||
db = req.result; | ||
db.createObjectStore(objectStoreName); | ||
}; | ||
req.onsuccess = function() { | ||
db = req.result; | ||
main(); | ||
} | ||
// ##### END BOILERPLATE ###### | ||
var control; | ||
function main() { | ||
var txn = db.transaction([objectStoreName], 'readonly']; | ||
control = txn.observe(observerFunction); | ||
txn.oncomplete = function() { | ||
console.log('Observing is starting!'); | ||
} | ||
} | ||
function observerFunction(changes) { | ||
console.log('Observer received changes!'); | ||
// An object store that we're observing has changed. | ||
changes.records.forEach(function(records, objectStoreName) { | ||
console.log('Got changes for object store: ', objectStoreName); | ||
records.forEach(function(change) { | ||
// do something with change.type and change.key | ||
var type = change.type; | ||
switch (type) { | ||
case 'clear': | ||
console.log('object store cleared.'); | ||
break; | ||
case 'add': | ||
console.log('key "', change.key, '" added.'); | ||
break; | ||
case 'put': | ||
console.log('key "', change.key, '" putted.'); | ||
break; | ||
case 'delete': | ||
console.log('key or range "', change.key, '" deleted.'); | ||
break; | ||
} | ||
}); | ||
}); | ||
} | ||
</script> | ||
``` | ||
Here we ask for a readonly transaction in our changes: | ||
```js | ||
var control = txn.observe(function(changes) { | ||
var objectStore = changes.transaction.objectStore('store1'); | ||
// read in values, etc | ||
}, { includeTransaction: true }); | ||
``` | ||
Here we ask for the values in our changes: | ||
```js | ||
var control = txn.observe(function(changes) { | ||
changes.records.get(objectStoreName).forEach(function(change) { | ||
var type = change.type; | ||
switch (type) { | ||
case 'add': | ||
console.log('value "', change.value, '" added with key "', change.key, '"'); | ||
break; | ||
} | ||
}); | ||
}, { includeValues: true }); | ||
``` | ||
And when we're done... | ||
```js | ||
control.stop(); | ||
``` | ||
See the [explainer](EXPLAINER.md) for more info, and the [examples](https://dmurph.github.io/indexed-db-observers/) for hosted examples. The demo app is especially helpful, as it visualizes everything for you. |