Skip to content

Sync with upstream @ 02793353 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 42 commits into from
Closed
Changes from 3 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
f5f7550
Update article.md
tonchique Jun 6, 2019
3a5647a
Update article.md
tonchique Jun 7, 2019
d8e04e4
update description regarding forEach method on Set
Violet-Bora-Lee Jun 8, 2019
fec4742
update description regarding forEach method on Set
Violet-Bora-Lee Jun 8, 2019
f752403
Merge remote-tracking branch 'origin/patch-6' into patch-6
Violet-Bora-Lee Jun 8, 2019
7c6cfeb
Update article.md (#1040)
lex111 Jun 10, 2019
728998b
regexp
iliakan Jun 10, 2019
dbcbd45
fix
iliakan Jun 10, 2019
1913b45
Merge branch 'master' into patch-7
tonchique Jun 10, 2019
1b963bd
Update article.md (#1043)
lex111 Jun 10, 2019
e1c0d62
Merge pull request #1044 from Violet-Bora-Lee/patch-6
iliakan Jun 11, 2019
bfd62b9
Update article.md
developerdavo Jun 11, 2019
88b8604
Merge pull request #1 from javascript-tutorial/master
DouglasMV Jun 11, 2019
ace757d
missing backticks
DouglasMV Jun 11, 2019
1856fe3
missing backticks
DouglasMV Jun 11, 2019
cce0816
typo
DouglasMV Jun 11, 2019
3e2e8c7
Spelling and grammar fixes to generators and modules
jasmaa Jun 12, 2019
f6e2c89
Merge pull request #1048 from DeveloperDavo/master
iliakan Jun 12, 2019
5498450
fixes
iliakan Jun 12, 2019
60585f2
fix
iliakan Jun 12, 2019
726f08a
Merge pull request #1049 from DouglasMV/master
iliakan Jun 12, 2019
852b9bf
proxy
iliakan Jun 12, 2019
c6620f6
Fix typo
lex111 Jun 13, 2019
011eb86
css
iliakan Jun 14, 2019
afdd505
Update README.md
iliakan Jun 14, 2019
611cef3
Update README.md
iliakan Jun 14, 2019
fea7593
Update README.md
iliakan Jun 14, 2019
8be8d6c
Update README.md
iliakan Jun 14, 2019
dfb4f00
Merge branch 'master' of https://github.com/javascript-tutorial/en.ja…
jasmaa Jun 14, 2019
76d599f
rewrite global object
iliakan Jun 14, 2019
f418ab3
fix
iliakan Jun 14, 2019
ed85606
update example scripts
Violet-Bora-Lee Jun 15, 2019
661cb16
Merge pull request #1059 from Violet-Bora-Lee/patch-8
iliakan Jun 15, 2019
e35bcf2
Merge pull request #1057 from jasmaa/minor-fixes
iliakan Jun 15, 2019
358c140
fixes
iliakan Jun 15, 2019
1dc1e63
Fix typo
Violet-Bora-Lee Jun 15, 2019
0e81fb4
Fix typo (#1061)
lex111 Jun 15, 2019
42a1108
minor
iliakan Jun 15, 2019
329a53c
eval
iliakan Jun 15, 2019
70cf2b2
minor
iliakan Jun 16, 2019
0279335
fixes, eventSource
iliakan Jun 16, 2019
a866ae4
merging all conflicts
Jun 17, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions 6-data-storage/03-indexeddb/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ openRequest.onupgradeneeded = function() {
};

openRequest.onerror = function() {
console.error("Error", openResult.error);
console.error("Error", openRequest.error);
};

openRequest.onsuccess = function() {
Expand Down Expand Up @@ -107,16 +107,18 @@ IndexedDB uses the [standard serialization algorithm](https://www.w3.org/TR/html

An example of object that can't be stored: an object with circular references. Such objects are not serializable. `JSON.stringify` also fails for such objects.

**There must be an unique `key` for every value in the store.**
**There must be a unique `key` for every value in the store.**

A key must have a type one of: number, date, string, binary, or array. It's an unique identifier: we can search/remove/update values by the key.

![](indexeddb-structure.png)

As we'll see very soon, we can provide a key when we add an value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows to setup an object property as the key, that's much more convenient. Or we can auto-generate keys.

As we'll see very soon, we can provide a key when we add a value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows to setup an object property as the key, that's much more convenient. Or we can auto-generate keys.

But we need to create an object store first.


The syntax to create an object store:
```js
db.createObjectStore(name[, keyOptions]);
Expand Down Expand Up @@ -194,7 +196,7 @@ db.transaction(store[, type]);
- `readonly` -- can only read, the default.
- `readwrite` -- can only read and write the data, but not create/remove/alter object stores.

There'is also `versionchange` transaction type: such transactions can do everything, but we can't create them manually. IndexedDB automatically creates a `versionchange` transaction when opening the database, for `updateneeded` handler. That's why it's a single place where we can update the database structure, create/remove object stores.
There's also `versionchange` transaction type: such transactions can do everything, but we can't create them manually. IndexedDB automatically creates a `versionchange` transaction when opening the database, for `updateneeded` handler. That's why it's a single place where we can update the database structure, create/remove object stores.

```smart header="Why there exist different types of transactions?"
Performance is the reason why transactions need to be labeled either `readonly` and `readwrite`.
Expand Down Expand Up @@ -462,7 +464,7 @@ objectStore.createIndex(name, keyPath, [options]);
- **`keyPath`** -- path to the object field that the index should track (we're going to search by that field),
- **`option`** -- an optional object with properties:
- **`unique`** -- if true, then there may be only one object in the store with the given value at the `keyPath`. The index will enforce that by generating an error if we try to add a duplicate.
- **`multiEntry`** -- only used if there value on `keyPath` is an array. In that case, by default, the index will treat the whole array as the key. But if `multiEntry` is true, then the index will keep a list of store objects for each value in that array. So array members become index keys.
- **`multiEntry`** -- only used if the value on `keyPath` is an array. In that case, by default, the index will treat the whole array as the key. But if `multiEntry` is true, then the index will keep a list of store objects for each value in that array. So array members become index keys.

In our example, we store books keyed by `id`.

Expand Down Expand Up @@ -611,7 +613,7 @@ Whether there are more values matching the cursor or not -- `onsuccess` gets cal

In the example above the cursor was made for the object store.

But we also can make a cursor over an index. As we remember, indexes allow to search by an object field. Cursors over indexes to precisely the same as over object stores -- they save memory by returning one value at a timee.
But we also can make a cursor over an index. As we remember, indexes allow to search by an object field. Cursors over indexes to precisely the same as over object stores -- they save memory by returning one value at a time.

For cursors over indexes, `cursor.key` is the index key (e.g. price), and we should use `cursor.primaryKey` property the object key:

Expand Down Expand Up @@ -685,7 +687,9 @@ window.addEventListener('unhandledrejection', event => {

### "Inactive transaction" pitfall

A we know already, a transaction auto-commits as soon as the browser is done with the current code and microtasks. So if we put an *macrotask* like `fetch` in the middle of a transaction, then the transaction won't wait for it to finish. It just auto-commits. So the next request in it would fail.

As we already know, a transaction auto-commits as soon as the browser is done with the current code and microtasks. So if we put a *macrotask* like `fetch` in the middle of a transaction, then the transaction won't wait for it to finish. It just auto-commits. So the next request in it would fail.


For a promise wrapper and `async/await` the situation is the same.

Expand All @@ -712,7 +716,7 @@ The workaround is same as when working with native IndexedDB: either make a new

Internally, the wrapper performs a native IndexedDB request, adding `onerror/onsuccess` to it, and returns a promise that rejects/resolves with the result.

That works most fine of the time. The examples are at the lib page <https://github.com/jakearchibald/idb>.
That works fine most of the time. The examples are at the lib page <https://github.com/jakearchibald/idb>.

In few rare cases, when we need the original `request` object, we can access it as `promise.request` property of the promise:

Expand Down