Web Storage — A API motherfucker do HTML5

Você que curte usar cookies loucamente, conhece o poder da API motherfucker Web Storage do HTML5? É meu caro , ela fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.

Com essa fofura podemos utilizar duas maneiras de armazenar nossos dados através do objeto Window:

SessionStorage: Mantém as informações armazenadas por origem e permanece disponível enquanto há uma sessão aberta no navegador (mesmo a página sendo recarregada). Caso o browser seja fechado a sessão será limpa e as informações serão perdidas.

LocalStorage: Mesmo que o navegador seja fechado, os dados permanecem armazenados. Os dados só serão excluídos pelos métodos com essa finalidade ou então se o usuário limpar os dados de navegação.

Basicamente iremos utilizar os métodos:

setItem

Nos possibilita setar os dados por chave/valor

window.localStorage.setItem('nome', 'Allan Barbosa');
var obj = { nome: 'Allan Barbosa', idade: 26 };
window.localStorage.setItem('usuario', JSON.stringify(obj));

getItem

Resgatamos os valores armazenado.

var nome = window.localStorage.getItem('nome');
console.log(nome); //Allan Barbosa
var obj = JSON.parse(window.localStorage.getItem('usuario'));
console.log(obj.nome); // Allan Barbosa
console.log(obj.idade); // 26
localStorage.getItem(localStorage.key(0)) //Imprime obj json

removeItem e clear

Apaga valor pela chave informada.

window.localStorage.removeItem('nome')

Já o clear, apaga todos os itens armazenados.

localStorage.clear();

length

Informa a quantidade de itens armazenados no localStorage.

localStorage.length

key

Imprime a chave de acordo com o índice passado via parâmetro.

localStorage.key(0)

…

Podemos debugar e editar o localStorage através do browser, basta acessar Developers Tools > Application > Local Storage e teremos algo parecido com:

Além disso a navegação privada/modo de navegação anônima, onde a diferença é que todos os dados armazenados é apagado depois que o navegador é fechado.