Web Storage - JavaScript

O HTML5 oferece uma API especial chamada Web Storage API, que proporciona acesso ao armazenamento interno do navegador (web storage). Este armazenamento é composto por dois componentes: session storage e local storage.

O session storage representa um armazenamento temporário de informações, que são removidas após o fechamento da aba do navegador.

O local storage representa um armazenamento de dados de forma permanente. Os dados no local storage não são removidos automaticamente e não possuem um prazo de validade. Esses dados não são enviados ao servidor em uma solicitação HTTP. Além disso, a capacidade de armazenamento no Chrome e Firefox é de 5 MB por domínio.

Estrutura dos Dados

Todos os dados no web storage são representados por um conjunto de pares chave-valor. Cada objeto possui um nome único (chave) e um valor associado.

Para trabalhar com o local storage em JavaScript, utiliza-se o objeto localStorage, e para trabalhar com o session storage, utiliza-se o objeto sessionStorage. Ambos os objetos são semelhantes em termos de API e fornecem propriedades e métodos análogos:

length: contém o número de elementos no armazenamento
clear(): remove todos os elementos do armazenamento
getItem(key): retorna um elemento específico que possui a chave key
key(index): retorna a chave do elemento que possui o índice index
removeItem(key): remove o elemento com a chave key
setItem(key, value): define o valor value para o elemento com a chave key. Se o elemento com a chave key já existe no armazenamento, seu valor é sobrescrito. Se não, o elemento é adicionado.

Salvando Dados

Para salvar dados no armazenamento, utiliza-se o método setItem(key, value), no qual são passados a chave e o valor do elemento. É importante notar que apenas strings podem ser salvas como valores. Por exemplo:

localStorage.setItem("email", "tom32@gmail.com");
sessionStorage.setItem("username", "Tom Smith");

Neste exemplo, um elemento com a chave "email" e valor "tom32@gmail.com" é salvo no localStorage, enquanto um elemento com a chave "username" e valor "Tom Smith" é salvo no sessionStorage.

É possível visualizar os objetos salvos no local storage e session storage utilizando ferramentas de desenvolvedor. No Google Chrome, por exemplo, pode-se abrir as ferramentas de desenvolvedor e navegar até a aba Aplicativo (ou Application). Em seguida, na parte esquerda, selecionar Armazenamento -> Armazenamento local ou Armazenamento da sessão. (ou Storage -> Local Storage ou Session Storage):

Local Storage e Session storage em JavaScript

Se o valor a ser salvo não for uma string, ele será convertido para string utilizando o método toString(). Por exemplo:

localStorage.setItem("age", 39);

Aqui, o valor representa um número, que será convertido para string antes de ser salvo.

Podem surgir dificuldades ao salvar objetos complexos:

const user = {
    name: "Tom",
    age: 23,
    isMarried: false
};
 
localStorage.setItem("user", user); // user = [object Object]

Aqui, estamos tentando salvar o objeto user. No entanto, ao ser convertido para string, ele se torna [object Object].

Para resolver isso, é necessário convertê-los para JSON:

const user = {
    name: "Tom",
    age: 23,
    isMarried: false
};
 
localStorage.setItem("user", JSON.stringify(user));

Obtendo Dados

Para obter os dados salvos, deve-se chamar o método getItem(), passando a chave do objeto:

// salvando no local storage
localStorage.setItem("email", "tom32@gmail.com");
// obtendo do local storage
const email = localStorage.getItem("email"); // "tom32@gmail.com"

Se os dados salvos não forem strings, pode ser necessário convertê-los de volta ao tipo original:

localStorage.setItem("age", 23);
// convertendo para número
let age = parseInt(localStorage.getItem("age"));
age += 1;
console.log(age); // 24

Se o valor não for convertido para número utilizando parseInt(), a variável age continuará a se comportar como string.

Se o objeto foi salvo como JSON, pode-se convertê-lo de volta para objeto utilizando JSON.parse():

const tom = {
    name: "Tom",
    age: 23,
    isMarried: false
};
 
localStorage.setItem("user", JSON.stringify(tom));
 
// convertendo para objeto
const user = JSON.parse(localStorage.getItem("user"));
console.log(user.name);  // Tom
console.log(user.age);   // 23
console.log(user.isMarried); // false

Removendo Dados

Para remover um objeto, utiliza-se o método removeItem(), que aceita a chave do objeto a ser removido:

localStorage.removeItem("email");

Para remover todos os objetos do localStorage, pode-se usar o método clear():

localStorage.clear();