PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc.

Transcrição

1 PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc.

2 ROTEIRO Introdução Compatibilidade Principais características Web SQL Storage Web Storage Verificação de suporte

3 INTRODUÇÃO O HTML 5 prevê duas APIs para armazenamento de dados no lado do cliente: Web Storage Web SQL Storage Diretrizes para implementação dessas funcionalidades: Iniciadas pelo WHATWG (Grupo de Trabalho para HTML5); Posteriormente, foram repassadas ao W3C;

4 INTRODUÇÃO A API Web Storage é suportada pelos navegadores modernos, inclusive IE 8; A API Web SQL Storage não é suportada pelos navegadores Mozilla, que implementam em seu lugar outra tecnologia similar, denominada IndexedDB;

5 COMPATIBILIDADE

6 PRINCIPAIS CARACTERÍSTICAS Web SQL Storage Esta especificação não está mais em manutenção ativa e o Web Applications Working Group não tem a intenção de mantê-la; No lugar dela, está sendo desenvolvida a especificação Indexed Database API, sugerida pela fundação Mozilla.

7 PRINCIPAIS CARACTERÍSTICAS Web Storage É uma API destinada ao armazenamento de dados em clientes web Por exemplo, um navegador Essa funcionalidade foi criada com a finalidade de corrigir a forma conceitual e precária do funcionamento de cookies e de sessões; Cookie mecanismo capaz de armazenar pequenas porções de dados gravadas em um arquivo texto no computador do usuário; Um cookie é criado e apagado em uma página web com uso da linguagem de programação no lado do servidor ou com JavaScript (no lado cliente); Cookies apresentam limitações que vão desde a reduzida capacidade de armazenagem (4kb) até severas falhas de segurança;

8 PRINCIPAIS CARACTERÍSTICAS sessionstorage Mecanismo projetado com a finalidade de armazenar dados para transação em um documento HTML i.e., para cada novo documento HTML é criada uma área de armazenamento de dados independente; Assim é possível coexistirem múltiplas transações em diferentes janelas ou abas do navegador ao mesmo tempo, cada uma com seus conjuntos de dados independentes; Os dados pertencentes a um documento são excluídos quando o usuário fecha a janela ou a aba do navegador e não são transmitidos e nem se comunicam com outras janelas ou abas.

9 PRINCIPAIS CARACTERÍSTICAS localstorage Mecanismo projetado com a finalidade de armazenar dados que persistem em diferentes janelas ou abas do navegador Permite que uma transação compartilhe em diferentes janelas ou abas do navegador o mesmo conjunto de dados; Os dados são excluídos quando o usuário fecha o navegador e são transmitidos e se comunicam com outras janelas ou abas enquanto o navegador estiver aberto;

10 PRINCIPAIS CARACTERÍSTICAS sessionstorage e localstorage Os objetos sessionstorage e localstorage admitem métodos destinados a gravar um par chave-valor para um dado, recuperar o valor de um dado, remover o valor de um dado, remover todos os dados gravados anteriormente e recuperar o nome de um dado: setitem() getitem() removeitem() clear() key() Também contem a propriedade length;

11 PRINCIPAIS CARACTERÍSTICAS Armazenagem com JSON Por padrão, o tipo de dado armazenado localmente é string Então, deve-se prestar atenção, pois números deverão ser devidamente convertidos no momento de recuperar um dado; JSON permite que se use texto para representar objetos JavaScript; Também permite armazenar localmente objetos complexos e recuperá-los posteriormente com o uso dos métodos JSON.stringify() JSON.parse()

12 PRINCIPAIS CARACTERÍSTICAS Evento storage O evento storage ocorre sempre que há uma alteração na área de armazenamento de dados definida pelo método localstorage; As propriedades do evento storage são: key string com o nome do dado que foi modificado, adicionado ou removido oldvalue valor de um dado que tenha sido modificado ou null se o dado foi adicionado pela primeira vez newvalue valor adicionado para um dado ou null se o valor foi removido storagearea retorna o objeto localstorage url endereço da página na qual se encontra o método que provocou o evento

13 VERIFICAÇÃO DE SUPORTE Outra forma de verificar se o navegador possui suporte a Web Storage: if(typeof(storage)!=="undefined") { //o browser suporta HTML 5 Web Storage } else { //o browser não suporta HTML 5 Web Storage }

14 VERIFICAÇÃO DE SUPORTE Uma forma de verificar se o navegador que está sendo usado possui suporte a Web Storage é através do uso da biblioteca Modernizr if (!Modernizr.sessionstorage) { // código alternativo para sessionstorage } if (!Modernizr.localstorage) { // código alternativo para localstorage } if (!Modernizr.indexeddb) { // código alternativo para indexeddb }

15 GERENCIANDO O STORAGE PELO BROWSER Alguns dos browsers mais atuais oferecem ferramentas de auxílio ao desenvolvedor Por exemplo, o Google Chrome permite visualizar os dados armazenados do web storage, bem como editá-los e removêlos.

16 GERENCIANDO O STORAGE PELO BROWSER Com a página aberta no Chrome Pressione F12 Na parte inferior da janela abre uma aba com algumas opções Clique na opção Resources Em seguida, na estrutura de árvore da esquerda, clique na opção Local Storage e no subitem Local Files Os dados armazenados no web storage são apresentados do lado direito

17 EXERCÍCIO PARA FIXAÇÃO Desenvolva uma aplicação web que tenha um formulário para coleta de dados Use programação em 3 (três) camadas: GUI Responsável pela interface com o usuário e botões: incluir, alterar, excluir, consultar (*.html) Classes de negócio definem o objeto (propriedades = dados do formulário; métodos set e get) (*.js) DAO classe que contém os métodos para manipulação do BD (storage) (*.js) Pode usar localstorage Use JSON para serializar os dados em um par chave-valor

18 EXERCÍCIO PARA FIXAÇÃO Referências Além das referências citadas no slide, procure tutoriais HTML 5 no Google Palavras-chave HTML5 localstorage HTML5 localstorage com JSON

19 REFERÊNCIAS SILVA, M. S. jquery Mobile: desenvolva aplicações web para dispositivos móveis com HTML 5, CSS3, Ajax, jquery e jquery UI. São Paulo: Novatec, Trabalhando com HTML5 Web Storage