Como utilizar Storage através do JavaScript

Em um passado não muito distante, quando era necessário armazenar alguma informação no lado do cliente, e gerenciar através do JavaScript, logo se pensava em “Cookies”. Existem alguns plugins para se trabalhar de forma melhor com cookies. Porem é um tanto limitado, comparado ao “Storage”.
Ao contrário dos cookies, o Storage só pode ser manipulado do lado do cliente, ou seja, pelo JavaScript.
A capacidade de armazenamento aumentou consideravelmente (em relação aos cookies), cerca de 5 MBs, dependendo do navegador.
O armazenamento é por origem (por domínio e protocolo). Todas as páginas de uma origem podem armazenar e acessar os mesmos dados, ou seja, somente o domínio que adicionou o item no Storage, pode obter os dados do mesmo, por questão de segurança.
Vamos entender como trabalhar com o Storage.

Existem dois locais para armazenar: “window.localStorage” e “window.sessionStorage”. Nos exemplos, vamos omitir o uso do “window”, já que o mesmo é implícito.

localStorage: Armazena sem data de expiração, mesmo quando o navegador é fechado, os dados permanecem armazenados. Cuidado ao utilizar este, devido ao seu limite de armazenamento.
sessionStorage: Armazena os dados por sessão, os dados são perdidos quando a guia do navegador é fechada.

Primeiro, vamos ver como identificar se o navegador suporta o recurso

if (typeof(Storage) !== "undefined")
    alert("Este navegador suporta o uso");
else
    alert("Este navegador não suporta o uso");

Como podemos ver acima, fizemos um “if”, para verificar se a variável nativa “Storage” existe, caso sim, significa que o navegador suporta o uso de Storage.

Como adicionar um item (a sintaxe é na mesma, para o uso de “localStorage” ou “sessionStorage”), considere trocar “localStorage” por “sessionStorage”, para testar os exemplos.

localStorage.setItem('nome', 'André Btoe');

Acima, adicionamos um item no “localStorage”, com a chave “nome”, e com o valor “André Btoe”.
A primeira vez que esse trecho de código for executado, irá adicionar o item, ao executar novamente, o mesmo valor será subscrito.
O primeiro argumento é o identificador do item adicionado, ele será usado no momento que for necessário obter o valor.
O segundo argumento é os dados que você deseja armazenar. Visto que este, permite apenas o uso de “string”, caso você necessite armazenar um object JavaScript, você deve serializar o object para Json, utilizando “JSON.stringify”, ou algo equivalente.

Como obter um valor por chave

var nome = localStorage.getItem('nome');
alert(nome);

Acima, atribuirmos a variável “nome” com o valor armazenado no “localStorage”, com a chave “nome”, utilizando o método “getItem”.

Como armazenar um object

var carro = {
	nome: "Focus",
	marca: "Ford"
};

localStorage.setItem('carro', JSON.stringify(carro));
var carroNovo = JSON.parse(localStorage.getItem('carro'));

Primeiro, criamos um object e atribuímos a variável de nome “carro”, com dois atributos “nome” e “marca”, ambos do tipo “string”, porem poderia ser qualquer valor permitido em um object JavaScript.
Logo abaixo, adicionamos um item, com o uso do método “setItem”, passando como parâmetro o nome do identificar do item, nome caso “carro”.
Em seguida, informamos o segundo parâmetro, que nada mais que um retorno do tipo “string”, provido pelo método “stringify”, que retorna uma “string”, no formato Json.
E por último, atribuímos o retorno armazenado, do identificar “carro”, utilizando o método “getItem”, que serve de parâmetro para o método “parse”, para deserializar os dados armazenados, e transformar em um object JavaScript novamente, e atribuir a variável de nome “carroNovo”.

Limpar os dados do local storage

sessionStorage.clear()
localStorage.clear()

Acima, temos o uso do método “clear”, de ambos locais de armazenamento disponível. Ele apenas limpar todas os identificadores.

Espero ter ajudado!
Até a próxima!

Anúncios
Marcado com: , , , , , ,
Publicado em Javascript

Deixe seu comentário...

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: