HTML5 Web Storage – Mais seguro que Cookies

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: 

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 declarativa
localStorage.setItem("employer", "Turbosite");  // Armazena o valor
localStorage.getItem("employer");   // Resgata o valor "Turbosite"

// Forma comprimida
localStorage.employer = "Turbosite";  // Armazena o valor
localStorage.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 API
localStorage.removeItem("employer");

// Remover um item via Javascript nativo
delete(localStorage.employer);

Zerando o Web Storage

// Remover tudo
localStorage.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.