HTML 5: Client-side Storage

Até agora, para guardarmos dados no lado do cliente, estávamos limitados aos cookies ou Google Gears. Mas agora tudo vem integrado no HTML5.

O novo sistema Cliente-side storage está dividido em 3 metodologias:

  1. Session storage.
  2. Local storage
  3. Database storage

1. Session Storage

Áo contrário dos cookies, temos um espaço no lado do cliente de alguns MB para guardarmos os dados.

Mas os dados não são persistentes, ou seja, ao fecharmos a janela, tudo o que foi guardado será eliminado imediatamente.

Mas como utilizamos isto? Aqui vai um pequeno exemplo:

sessionStorage.setItem('nome', 'joao'); //definir variável de sessão
alert("O seu nome é: " + sessionStorage.getItem('nome'));// aceder a ela
alert("Olá" + sessionStorage.nome); // outra maneira de ver a variável
sessionStorage.removeItem('nome'); //eliminar a variável

2. Local Storage

O Local Storage é bastante identico ao Session Storage, mas trás algo mais para nos deliciar.

Ao contrário do Session Storage, este é persistente, ou seja, pode ser utilizado em todas as janelas do browser e quando estas são fechadas, não perdemos a informação guardada.

Aqui está o exemplo:

localStorage.setItem('nome', 'taranfx');//definir variável local
alert("O seu nome é: " + localStorage.getItem('nome')); // aceder a ela
alert("Hello " + localStorage.nome); //outra maneira de ver a variável
localStorage.removeItem('nome'); //eliminar a variável

3. Database Storage

Mas ás vezes precisamos de mais. Por enquanto penso que o safari tenha sido o unico a implementar este tipo de dados até agora. Mas corrijam-me se estiver errado.

Aqui vai um exemplo:

var db = openDatabase("nome_base_de_dados", "versao_base_de_dados");
   database.executeSql("SELECT * FROM tabela", function(result1) {
   //fazer algo com o resultset
   database.executeSql("DROP TABLE tabela", function(result2) {
      //fazer mais qualquer coisa
      alert("A minha segunda query terminou");
   });
   alert("A minha primeira query terminou");
});

Aqui fica o meu primeiro post, espero que seja útil. Se tiverem alguma duvida deixem um comentário.

Obrigado.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s