Quando a localStorage expira? Como remover elementos depois de um tempo

Neste artigo você vai aprender quando a localStorage expira, e também a remover um item depois de um determinado tempo

Fala programador(a), beleza? Bora aprender mais sobre a localStorage!

Os itens que estão salvos na localStorage não expiram, eles ficam lá para sempre

Ou até haver alguma intervenção nossa e excluirmos manualmente

Se você precisa que os dados expirem após fechar a aba do navegador, utilize a sessionStorage

Você pode aprender mais sobre eles objetos neste vídeo:

E para expirar depois de um tempo o dado na localStorage podemos criar um pequeno snippet

Veja um código de exemplo:

const expirationTime = 6; // Em horas

const currentHour = new Date().getTime();

const expirationTime = localStorage.getItem('expirationTime');

if (expirationTime === null) {

    localStorage.setItem('expirationTime', currentHour)

} else {

    const expirationCalc = now - setupTime > hours * 60 * 60 * 1000

    if(expirationCalc) {
        localStorage.clear()
        localStorage.setItem('setupTime', now);
    }

}

Priemeiramente definimos em quantas horas será a expiração

Depois pegamos a hora atual com Date

E por fim verificamos se há o item de expiração na localStorage

Se não houver inserimos o parâmetro de expiração como a hora atual (currentHour)

E se houver identificamos se já passou da quantidade de horas que escolhemos, isso é feito no cálculo da variável expirationCalc

Se o resultado for verdadeiro removemos tudo na localStorage e começamos a contar novamente o tempo

Conclusão

Neste artigo vimos que precisamos determinar quando a localStorage expira, pois os dados permanecem lá para sempre

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Foi preciso realizar um cálculo baseado em um tempo de expiração pré determinado por nós

Aqui escolhemos fazer por horas, mas fique a vontade para alterar de acordo com as suas necessidades

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos

localStorage, sessionStorage e cookie: quem expira quando?

Antes de sair escrevendo código, vale olhar os três lado a lado

Muita gente escreve lógica de expiração sem precisar, só porque escolheu o objeto errado

Se liga que o cookie é o único dos três que já nasce com campo de validade

Então o resumo é simples: se o teu caso é "some quando fechar", tu nem escreve lógica nenhuma, só troca o objeto

Agora se é "some depois de X horas", aí sim a conta é por tua conta 🙂

Como expirar SÓ um item da localStorage:

Limpar a localStorage inteira funciona, mas é meio um rm -rf na casa do usuário

Vai junto tema escuro, carrinho, preferência de idioma, tudo que tu guardou lá

Na maioria dos casos você quer que morra só AQUELE dado

O truque é parar de salvar o valor puro e passar a salvar o valor junto com a hora em que ele vira abóbora

Bora ver na prática?

function setComExpiracao(chave, valor, horas) {
const item = {
valor: valor,
expiraEm: Date.now() + horas * 60 * 60 * 1000
}

localStorage.setItem(chave, JSON.stringify(item))
}

function getComExpiracao(chave) {
const bruto = localStorage.getItem(chave)

if (!bruto) return null

const item = JSON.parse(bruto)

if (Date.now() > item.expiraEm) {
localStorage.removeItem(chave)
return null
}

return item.valor
}

Repara que a expiração fica DENTRO do próprio item, e não numa chave separada de controle

Cada chave passa a ter a própria validade, e quando vence, só ela é removida

Uso assim:

setComExpiracao('usuario', { nome: 'Matheus' }, 6)

const usuario = getComExpiracao('usuario')

Se já venceu, getComExpiracao devolve null e tu trata como se nunca tivesse existido =)

Por que checar a expiração na leitura e não com setTimeout?

A primeira ideia de quase todo mundo é resolver isso com setTimeout

Aí vem o problema: timer só existe enquanto a aba existe

O usuário fecha o navegador, volta dois dias depois, e o teu timeout nunca rodou

O dado vencido continua lá, inteirinho, esperando alguém ler

Por isso a checagem tem que acontecer no momento da LEITURA

Ninguém precisa apagar o dado no segundo exato em que ele vence, ele só não pode ser ENTREGUE depois de vencido, beleza?

Dá pra confiar no relógio do usuário?

Tome cuidado com essa parte

Date.now() lê o relógio da máquina de quem está navegando, não o teu

Se a pessoa atrasa o relógio do sistema, o dado "revive" numa boa

Pra cache de tela, rascunho de formulário, banner que some depois de um tempo, isso é irrelevante, pode ir tranquilo

Agora se a validade for regra de negócio (acesso liberado, período de teste, sessão), quem decide o vencimento é o servidor

O tempo salvo no navegador vira só um atalho pra evitar requisição, nunca a fonte da verdade

localStorage em app com React, Next e afins:

Quando esse post nasceu, o normal era rodar tudo direto no navegador

Hoje boa parte dos projetos renderiza uma parte no servidor antes de chegar no browser, e é aí que a casa cai

Caso apareça um erro dizendo que localStorage não está definido, é exatamente isso: no servidor não existe navegador, logo não existe localStorage

A saída é simples, checa antes de usar

function lerLocal(chave) {
if (typeof window === 'undefined') return null

return localStorage.getItem(chave)
}

E em componente, leia o dado só depois que ele montou na tela, nunca durante a primeira renderização

Assim tu evita o erro no servidor e ainda evita aquela diferença chata entre o que foi renderizado e o que aparece pro usuário

Guardar token de login na localStorage com expiração resolve?

Resposta curta: ajuda na experiência, mas não é segurança

Qualquer script que rodar na tua página consegue ler a localStorage, inclusive um que tu nem sabe que está lá

Colocar prazo de validade no token evita o usuário ficar com um dado velho na mão e tomar erro estranho na tela

Só que expirar no navegador não invalida nada de verdade

Quem diz se o token ainda vale é o backend, sempre

Trate a expiração no cliente como limpeza e conforto, não como tranca

localStorage, sessionStorage e cookie: quem expira quando?

Antes de sair escrevendo código, vale olhar os três lado a lado

Muita gente escreve lógica de expiração sem precisar, só porque escolheu o objeto errado

Se liga que o cookie é o único dos três que já nasce com campo de validade

Então o resumo é simples: se o teu caso é "some quando fechar", tu nem escreve lógica nenhuma, só troca o objeto

Agora se é "some depois de X horas", aí sim a conta é por tua conta 🙂

Como expirar SÓ um item da localStorage:

Limpar a localStorage inteira funciona, mas é meio um rm -rf na casa do usuário

Vai junto tema escuro, carrinho, preferência de idioma, tudo que tu guardou lá

Na maioria dos casos você quer que morra só AQUELE dado

O truque é parar de salvar o valor puro e passar a salvar o valor junto com a hora em que ele vira abóbora

Bora ver na prática?

function setComExpiracao(chave, valor, horas) {
const item = {
valor: valor,
expiraEm: Date.now() + horas * 60 * 60 * 1000
}

localStorage.setItem(chave, JSON.stringify(item))
}

function getComExpiracao(chave) {
const bruto = localStorage.getItem(chave)

if (!bruto) return null

const item = JSON.parse(bruto)

if (Date.now() > item.expiraEm) {
localStorage.removeItem(chave)
return null
}

return item.valor
}

Repara que a expiração fica DENTRO do próprio item, e não numa chave separada de controle

Cada chave passa a ter a própria validade, e quando vence, só ela é removida

Uso assim:

setComExpiracao('usuario', { nome: 'Matheus' }, 6)

const usuario = getComExpiracao('usuario')

Se já venceu, getComExpiracao devolve null e tu trata como se nunca tivesse existido =)

Por que checar a expiração na leitura e não com setTimeout?

A primeira ideia de quase todo mundo é resolver isso com setTimeout

Aí vem o problema: timer só existe enquanto a aba existe

O usuário fecha o navegador, volta dois dias depois, e o teu timeout nunca rodou

O dado vencido continua lá, inteirinho, esperando alguém ler

Por isso a checagem tem que acontecer no momento da LEITURA

Ninguém precisa apagar o dado no segundo exato em que ele vence, ele só não pode ser ENTREGUE depois de vencido, beleza?

Dá pra confiar no relógio do usuário?

Tome cuidado com essa parte

Date.now() lê o relógio da máquina de quem está navegando, não o teu

Se a pessoa atrasa o relógio do sistema, o dado "revive" numa boa

Pra cache de tela, rascunho de formulário, banner que some depois de um tempo, isso é irrelevante, pode ir tranquilo

Agora se a validade for regra de negócio (acesso liberado, período de teste, sessão), quem decide o vencimento é o servidor

O tempo salvo no navegador vira só um atalho pra evitar requisição, nunca a fonte da verdade

localStorage em app com React, Next e afins:

Quando esse post nasceu, o normal era rodar tudo direto no navegador

Hoje boa parte dos projetos renderiza uma parte no servidor antes de chegar no browser, e é aí que a casa cai

Caso apareça um erro dizendo que localStorage não está definido, é exatamente isso: no servidor não existe navegador, logo não existe localStorage

A saída é simples, checa antes de usar

function lerLocal(chave) {
if (typeof window === 'undefined') return null

return localStorage.getItem(chave)
}

E em componente, leia o dado só depois que ele montou na tela, nunca durante a primeira renderização

Assim tu evita o erro no servidor e ainda evita aquela diferença chata entre o que foi renderizado e o que aparece pro usuário

Guardar token de login na localStorage com expiração resolve?

Resposta curta: ajuda na experiência, mas não é segurança

Qualquer script que rodar na tua página consegue ler a localStorage, inclusive um que tu nem sabe que está lá

Colocar prazo de validade no token evita o usuário ficar com um dado velho na mão e tomar erro estranho na tela

Só que expirar no navegador não invalida nada de verdade

Quem diz se o token ainda vale é o backend, sempre

Trate a expiração no cliente como limpeza e conforto, não como tranca