This document discusses different options for storing data in a web browser, including cookies, localStorage, sessionStorage, File API, cache API, IndexedDB, and WebSQL. It focuses on IndexedDB, describing its features like being NoSQL, storing data per domain, using asynchronous data access. It explains the database structure of IndexedDB including the database, object stores, indexes, and transactions. It also briefly mentions some IndexedDB libraries and provides links to resources about reading data from IndexedDB.

1. Dima Tarasenko
May 2019
db in UI

2. about
2000 – 2019
dev - tech - sport
9 years: asmCC++
2 years: julia
9 years: JS
Interpreters
VMs
UI
•
•
•
•
•
•
•
•
fb: tmptrash

3. goals
meet technology
understand
investigate examples
•
•
•

4. where to store data?
cookie
localStorage
sessionStorage
File API
cache API
indexedDB
WebSQL
Cloud/Server
•
•
•
•
•
•
•
•

5. where to use such storages?
offline apps
data generation apps
state saving
session saving
games
UI cache
back-endless apps
•
•
•
•
•
•
•

6. WebSQL
The W3C Web Applications Working Group
ceased working on the specification in
November 2010, citing a lack of
independent implementations (i.e. the use
of a database system other than SQLite as
the backend) as the reason the
specification could not move forward to
become a W3C Recommendation.

7. WebSQL.example

8. indexedDB
IndexedDB is a way for you to persistently
store data inside a user's browser

9. indexedDB.features
NoSQL
data per domain (scheme+domain+port)
async data access
callback interface
good with promises/await
size: 50% of free disk space
stores blobs
•
•
•
•
•
•
•
Quota: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

10. indexedDB.support

11. indexedDB.db
Database - This is the highest level of
IndexedDB. It contains the object stores,
which in turn contain the data you would like
to persist. You can create multiple databases
with whatever names you choose, but
generally there is one database per app.

12. indexedDB.store
Object store - An object store is an individual
bucket to store data. You can think of object
stores as being similar to tables in traditional
relational databases.

13. indexedDB.index
Index - An Index is a kind of object store for
organizing data in another object store (called
the reference object store) by an individual
property of the data. The index is used to
retrieve records in the object store by this
property.

14. indexedDB.transaction
Transaction - A transaction is wrapper around
an operation, or group of operations, that
ensures database integrity. If one of the
actions within a transaction fail, none of them
are applied and the database returns to the
state it was in before the transaction began.
All read or write operations in IndexedDB
must be part of a transaction.

15. indexedDB.native

16. indexedDB.Dexie.js

17. indexedDB.libs
Dexie.js
localForage
PouchDB
•
•
•

18. indexedDB.read
concepts: https://tinyurl.com/lzplysk
interface: https://tinyurl.com/q8z46pr
usage: https://tinyurl.com/yxb9lexq
support: https://tinyurl.com/yycwtevq

19. questions