Quando usávamos o HTML4 a única forma de guardar dados no lado do cliente eram os cookies, mas eles não supriam a necessidade que os desenvolvedores possuem de uma interface mais simples de criação e recuperação dos dados. Entretanto, sua maior limitação era o seu tamanho de 4Kb.

Já o HTML5 nos provê três formas de armazenamento de dados no lado do cliente:

1. sessionStorage;
2. localStorage;
3. Web SQL Database.

No quesito suporte dos navegadores, teremos diferenças para a API Storage e Web SQL.

API Storage

IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID
8.0+	3.5+	4.0+	4.0+	10.5+	2.0+	2.0+

WEB SQL DATABASE

IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID
		4.0+	4.0+	10.5+	3.0+	2.0+

Analisando as tabelas acima vemos que já podemos utilizar o armazenamento do lado do cliente na maior parte dos navegadores. Contudo, o Firefox ainda peca por não dar suporte ao WebSQL, adicionando suporte ao IndexDB que é um banco de chave:valor.

Nesta primeira etapa veremos o sistema de localStorage e sessionStorage, que fazem parte da API Storage. Seu tipo de armazenamento é de chave: valor, sendo a chave sempre uma STRING. O objeto desta API possui 4 métodos:

1. getItem(chave) //obtém um valor armazenado no Storage
2. setItem(chave,valor) //guarda um valor no Storage
3. removeItem(chave) //exclui um valor do Storage
4. clear() //limpa o Storage

A diferença entre os dois é que o sessionStorage apenas guarda os dados durante a sessão do usuário, caso ele feche o navegador ou a aba, seus dados são excluídos. Enquanto que o localStorage não possui expiração definida.

Exemplo de utilização:

sessionStorage.setItem('usuario_id',12);
sessionStorage.setItem('usuario_nome','Jean Nascimento');
sessionStorage.setItem('usuario_apelido','suissa');
sessionStorage.setItem('usuario_tema','clean_01');
console.log(sessionStorage);

Também podemos usar a seguinte sintaxe:

sessionStorage[‘usuario_id'] = 12;
sessionStorage['usuario_nome'] = 'Jean Nascimento';
sessionStorage['usuario_apelido'] = 'suissa';
sessionStorage['usuario_tema'] = 'clean_01';

Vamos usar console do Chrome para visualizar os dados.

Para recuperarmos nossos valores utilizaremos a função getItem(). Dessa forma, o exemplo mostrando nossos valores fica assim:

document.write('<br />Id: '+sessionStorage.getItem('usuario_id') );
document.write('<br />Nome: '+sessionStorage.getItem('usuario_nome') );
document.write('<br />Apelido: '+sessionStorage.getItem('usuario_apelido') );
document.write('<br />Tema: '+sessionStorage.getItem('usuario_tema') );

O localStorage funciona da mesma forma e com as mesmas funções, entretanto a sua não expiração rápida dos dados é a forma que mais se assemelha aos antigos cookies. E o mais importante é que ele é orientado ao domínio, ou seja, qualquer página que rode no mesmo domínio terá acesso aos dados armazenados. Com este mesmo exemplo posso recuperar os dados em janelas diferentes.

Utilizando esta API não conseguiremos armazenar objetos diretamente. Para isso poderemos armazená-lo como uma string em JSON usando a função nativa do javascript:

JSON.stringify(Objeto)

E para recuperarmos, usaremos a função de parse nativa do javascript:

JSON.parse(stringObjeto)

Veja como fica no exemplo abaixo sem a conversão do objeto:

/*estou encapsulando todas as informações
para adicionar o objeto em apenas uma chave. */
var Objeto = { 'usuario_id': 12, 'usuario_nome': 'Jean Nascimento', 'usuario_apelido': 'suissa', 'usuario_tema': 'clean_01' };
//adiciono o Objeto na minha chave testeObjeto.
localStorage.setItem('testeObjeto01', Objeto);
var Objeto_simples = localStorage['testeObjeto'];
console.log('typeof Objeto: ' + typeof Objeto_simples);
console.log('Objeto sem parse: ', Objeto_simples);
console.log('Usuario nome: ', Objeto_simples.usuario_nome);

Agora parseando nosso objeto:

localStorage.setItem('testeObjeto02', JSON.stringify(Objeto));
var Objeto_real = localStorage['testeObjeto02'];
var Objeto_json = JSON.parse(Objeto_real)
console.log('typeof Objeto: ' + typeof Objeto_json);
console.log('Objeto: ', Objeto_json);
console.log('Usuario nome: ', Objeto_json.usuario_nome);

Ficará bem mais fácil para trabalharmos com o nosso objeto parseado de forma correta. Com isso, conseguiremos inserir um array de objetos mais facilmente. Veja o exemplo:

//Crio meu array de objetos no formato JSON

var Objetos = [{ 'usuario_id': 12, 'usuario_nome': 'Jean'}, { 'usuario_id': 13, 'usuario_nome': 'Jose'}, { 'usuario_id': 14, 'usuario_nome': 'Joao'}, { 'usuario_id': 15, 'usuario_nome': 'Maria'}];

//limpo meu localStorage

localStorage.clear();

//mostro os objetos

console.log(Objetos);

//salvo em uam variavel o tamanho do nosso array

var tamanho = Objetos.length;

//itero para inserir um objeto por vez

for(var i=0; i<tamanho; i++){

localStorage.setItem('row_'+i, JSON.stringify(Objetos[i]));

}

//mostro as strings gravadas no localStorage

console.log(localStorage);

var Array_objetos = new Array();

for(var i=0; i<tamanho; i++){

Array_objetos[i] = JSON.parse(localStorage.getItem('row_'+i));

}

//mostro os objetos retornados

console.log(Array_objetos);

Agora, se não quisermos utilizar este parseamento sempre, poderemos incluir no Prototype da nossa API mais duas funções, já fazendo esta conversão.

Storage.prototype.setObject = function(key, value) {
   this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
   return this.getItem(key) && JSON.parse(this.getItem(key));
}

Dessa forma, trocaríamos o setItem por setObject e o getItem por getObject. Então teremos o exemplo completo:

var Objetos = [{ 'usuario_id': 12, 'usuario_nome': 'Jean'}, { 'usuario_id': 13, 'usuario_nome': 'Jose'}, { 'usuario_id': 14, 'usuario_nome': 'Joao'}, { 'usuario_id': 15, 'usuario_nome': 'Maria'}];

localStorage.clear();

console.log(Objetos);

var tamanho = Objetos.length;

for(var i=0; i<tamanho; i++){

localStorage.setObject('row_'+i, Objetos[i]);

}

console.log(localStorage);

var Array_objetos = new Array();

for(var i=0; i<tamanho; i++){

Array_objetos[i] = localStorage.getObject('row_'+i);

}

console.log(Array_objetos);

No próximo artigo veremos sobre o Web SQL Database e como usar sqls comuns no lado do cliente.

Até lá!