O documento apresenta as principais formas de armazenamento de dados no cliente, comparando Cookies, Web Storage e IndexedDB. IndexedDB é descrito como a melhor opção, permitindo armazenar qualquer tipo de dado de forma assíncrona e com maior capacidade em comparação com Cookies e Web Storage. Os principais conceitos do IndexedDB como objetos IDBDatabase, IDBTransaction, IDBObjectStore e IDBIndex são explicados.

1. IndexedDB
Seu banco de dados no client side

2. Hello World
github.com/maikenegreiros
twitter.com/maike_negreiros
maike@ciebit.com.br
Maike Negreiros

3. Armazenamento de dados
no cliente
● Cookies
● Web Storage
● IndexedDB

4. Cookies
● Inseridos no cabeçalho HTTP
● Menor espaço de armazenamento
● Perda de performance
● Difícil gerenciamento

5. Cookies
document.cookie = "usuario=Fulano";
document.cookie = "username=John Doe;
expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

6. Web Storage
● localStorage/sessionStorage
● Maior espaço de armazenamento
● Per Domain
● chave/valor
● Armazenamento de strings
● Mais fácil gerenciamento
● Maior segurança
● Necessidade de parsear JSON

7. Web Storage - Métodos
● setItem(chave, valor)
● getItem(chave)
● removeItem(chave)
● clear()

8. Web Storage - Exemplo
localStorage.setItem(nome, “João”)
let nome = localStorage.getItem(nome)

9. Suporte

10. IndexedDB
● Maior espaço de armazenamento
● Per Domain
● Assíncrona
● chave/valor
● Armazena qualquer tipo de dado
● Modelo Transacional
● Sem necessidade de parsear JSON

11. Representação visual

12. Abrindo uma conexão
let pedidoConexao <IDBOpenDBRequest> =
window.indexedDB.open('ValeWebLivre', 1)

13. IDBOpenDBRequest
● Retorno do método open()
● Armazena um objeto IDBDatabase
● Tríade de Eventos

14. A tríade
● onupgradeneeded
● onsuccess
● onerror

15. onupgradeneeded
pedidoConexao.onupgradeneeded = () => {
//Cria as ObjectStores aqui
}

16. onsuccess
pedidoConexao.onsuccess = () => {
//Aqui é onde manipulamos os dados das objectStore
}

17. onerror
pedidoConexao.onerror = () => {
//Aqui é onde tratamos os erros
}

18. IDBDatabase
● Representa uma conexão ao Banco de Dados
● É onde se inicia uma transação
● Possui métodos de criação e exclusão de
objectStores

19. IDBDataBase
pedidoConexao.onsuccess = () => {
let banco <IDBDataBase> = pedidoConexao.result
}

20. IDBObjectStore
● Representa um objectStore
● É onde são chamados os métodos de CRUD

21. IDBObjectStore
pedidoConexao.onupgradeneeded = () => {
let banco <IDBDataBase> =
pedidoConexao.result
–
let objectStore <IDBObjectStore> =
banco.createObjectStore(‘palestras’,
{autoIncrement: true})
}

22. IDBObjectStore
pedidoConexao.onsuccess = () => {
let banco <IDBDataBase> =
pedidoConexao.result
–
– let transacao <IDBTransaction> =
banco.transaction([‘palestras’], ’readwrite’)
–
– let objectStore <IDBObjectStore> =
transacao.objectStore(‘palestras’)
}

23. IDBTransaction
● Representa um transação
● Aceita um array de objectStores
● Pode ser readonly ou readwrite

24. IDBTransaction
pedidoConexao.onsuccess = () => {
let banco <IDBDataBase> = pedidoConexao.result
–
– let transacao <IDBTransaction> =
banco.transaction([‘palestras’], ’readwrite’)
}

25. IDBRequest
● Dá acesso a resultados de requisições
assíncronas ao BD e a objetos do BD.
● É o retorno de um método de CRUD
● Possui eventos para tratar os dados

26. IDBRequest
pedidoConexao.onsuccess = () => {
let banco <IDBDataBase> = pedidoConexao.result
–
– let transacao <IDBTransaction> =
banco.transaction([‘palestras’], ’readwrite’)
–
– let objectStore <IDBObjectStore> =
transacao.objectStore(‘palestras’)
–
– let pedidoAdicao <IDBRequest> =
objectStore.add({nome: “IndexedDb: Seu banco de dados
no client-side”, palestrante: “Maike Negreiros”})
}

27. IDBRequest
pedidoConexao.onsuccess = () => {
//código anterior ocultado
–
– pedidoAdicao.onsuccess () => {
● let key = pedidoAdicao.result
– }
–
– pedidoAdicao.onerror() => {
● pedidoAdicao.error
– }
}

28. IDBIndex
● Retorno de uma chamada do método createIndex
● Contém informações do index criado
● Assim com o IDBObjectStore, possui o método get

29. IDBIndex
pedidoConexao.onupgradeneeded = () => {
let banco <IDBDataBase> =
pedidoConexao.result
–
let objectStore <IDBObjectStore> =
banco.createObjectStore(‘palestras’,
{autoIncrement: true})
–
let index <IDBIndex> =
objectStore.createIndex("idx_palestrante",
"palestrante", {unique: false})
}

30. IDBIndex
pedidoConexao.onsuccess = () => {
let banco <IDBDataBase> = pedidoConexao.result
–
– let transacao <IDBTransaction> =
banco.transaction([‘palestras’], ’readwrite’)
–
– let objectStore <IDBObjectStore> =
transacao.objectStore(‘palestras’)
–
– let index <IDBIndex> =
objectStore.index(“idx_palestras”)
}

31. Suporte

32. IndexedDB vs SQL
SQL IndexedDB
CREATE DATABASE ValeWebLivre indexedDB.open('ValeWebLivre',1)
CREATE TABLE palestras; IDBDatabase
.createObjectStore('palestras')
DROP TABLE palestras IDBDatabase
.deleteObjectStore(‘palestras’)
INSERT INTO palestras() VALUES() transaction.store.add(Object)
AUTO_INCREMENT {autoIncrement: true}
PRIMARY KEY {keyPath: ‘id’}
CREATE INDEX idx_palestras ON
palestras(`palestrante`)
objectStore.createIndex("idx_pales
tras", "palestrante", {unique:
false})

33. Falar é fácil, cadê o
código rodando?

34. Pollyfills e bibliotecas
● IndexedDB Shim
● IndexedDB Promised
● Localforage
● Dexie.js
● Taffydb