HTML5 Web Storage – Mais seguro que Cookies

10:01

HTML 5 Web Storage é uma alternativa para armazenar dados e os persistirem do lado do cliente. Ele é mais seguro e confiável que os Cookies, além de não serem enviados em todas as requisições para o servidor, em consequência, em aplicações de grande porte isto economizará muitos dados trafegados.

Uma citação da W3C Schools que vale nossa atenção, ela é mencionada comparando com os Cookies:

Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Fonte: http://www.w3schools.com/html/html5_webstorage.asp

 

Nós publicamos um artigo falando sobre Web SQL Database que veio para suprir esta necessidade, mas, infelizmente publicamos uma tecnologia que está obsoleta (gafe nossa) e por isso não indicamos a utilizá-la.

 

A vantagem de utilizarmos o HTML 5 Web Storage é a facilidade, a compatibilidade já que, ele é suportado na maiores dos browser e por incrível que pareça, a partir do IE8 você pode utilizá-lo (isto chega a nos surpreender).

Testados e suportados:  compatible_safari compatible_chrome compatible_firefox compatible_ie compatible_opera

Um detalhe que deve ser conhecido é, o Local Storage é por domínio e os dados podem ser armazenados/acessados por todas as páginas do mesmo.

Bom, chega de explicações, vamos a prática.

 

Métodos utilizados

localStorage.setItem(name, value);
localStorage.getItem(name);
localStorage.clear();
localStorage.length;

 

Testando se o Browser suporta Web Storage

if(typeof(Storage) !== "undefined") { // Código para localStorage/sessionStorage} else { // Implemente outra solução, está não funciona. :/}

 

Observação: O Web Storage não armazena objetos e  arrays em JavaScript, por isto utilizamos o JSON.stringify e JSON.parse para converter os objetos de forma apropriada para armazenar.

 

Armazenando uma informação

// Forma declarativalocalStorage.setItem("employer", "Turbosite"); // Armazena o valorlocalStorage.getItem("employer"); // Resgata o valor "Turbosite"// Forma comprimidalocalStorage.employer = "Turbosite"; // Armazena o valorlocalStorage.employer; // Resgata o valor "Turbosite"

 

Verificando o tamanho do Web Storage

// Verificando o tamanho do Storage ( itens armazenados )localStorage.length

 

Removendo itens

// Remover um item pela APIlocalStorage.removeItem("employer");// Remover um item via Javascript nativodelete(localStorage.employer);

 

Zerando o Web Storage

// Remover tudolocalStorage.clear(); // Reseta os dados

Armazenando objetos em Javascript

data_employer = { "name": "Turbosite", "phones" : [ "4003-2322", "4062-1020", "0800 888 2322" ], "location": { "city": "Belo Horizonte", "state": "Minas Gerais", "country": "Brasil" }}localStorage.data_employer = data_employer;localStorage.data_employer; // Resultado: "[object Object]"

 

Como podem ver, o resultado não foi o esperado, o Web Storage converteu o objeto para toString() e em vez de armazenar os dados do objeto, armazenou a string [object Object].

Uma solução seria, converter o objeto para string e armazená-lo, existe a função nativa JSON.stringify, desta forma ficaria:

data_employer = { "name": "Turbosite", "phones" : [ "4003-2322", "4062-1020", "0800 888 2322" ], "location": { "city": "Belo Horizonte", "state": "Minas Gerais", "country": "Brasil" }}localStorage.data_employer = JSON.stringify(data_employer);localStorage.data_employer; // "{"name":"Turbosite","phones":["4003-2322","4062-1020","0800 888 2322"],"location":{"city":"Belo Horizonte","state":"Minas Gerais","country":"Brasil"}}"

 

Como agora é uma string, não pode ser trabalhada como um objeto, mas, basta agora utilizar a JSON.parse que novamente será um objeto manipulável, exemplo:

data_employer = JSON.parse(localStorage.data_employer); // Object {name: "Turbosite", phones: Array[3], location: Object}

 

Muito simples e tranquilo de trabalhar e como a própria W3C disse, mais seguro e rápido, nada de sobrecarregar servidores com COOKIES gigantescos. Dicas e comentários são sempre bem vindos, correções também.