Usando o local storage a seu favor

Olá, imagine a seguinte situação, você tem que implementar os dados das taxas básicas do Brasil (Selic, CDB, IPCA, etc...) em uma dashboard, em algum momento você vai precisar bater em um endpoint externo. Chamar esse endpoint a cada carregamento dessa página não é uma opção...

Colocar em local storagem é uma ótima opção, mas para renovar esse item no local storage temos que ter um certo controle sobre esse item.

para isso em minha aplicação eu desenvolvi uma classe que fica responsável por colocar e recuperar itens do local storage.

Vamos ao código:

import CalendarTools from './calendarTools'

const LocalStorageTools = {
    storage: {
        getStorageItem: function(key) {
            const itemInStorage = localStorage.getItem(key)
            if (itemInStorage) {
                const itemParsed = JSON.parse(itemInStorage)
                const now = CalendarTools.getToday()
                if (now.getTime() < itemParsed.expiry) {
                    return itemParsed.value
                }
                this.removeStorageItems(key)
            }
            return null
        },
        setStorageItem: function(key, value, expireTimeMs) {
            const expiry = expireTimeMs ?? CalendarTools.threeHoursInMs()
            localStorage.setItem(key, JSON.stringify({
                value,
                expiry: CalendarTools.getToday().getTime() + expiry
            }))
        },
        removeStorageItems: function(...keys) {
            keys.forEach((key) => {
                localStorage.removeItem(key)
            })
        }
    }
}

export default LocalStorageTools

Vamos a explicação, como controle eu uso uma string que armazena o tempo que o item irá expirar, que sempre será o tempo atual somado com um tempo de expiração em ms, com isso, no local storage sempre teremos o item como objeto com dois atributos, um expiry e um value, que é onde vai ficar o que queremos armazenar.

Sendo assim a função de salvar o item em local storage vai ficar responsável por salvar no formato mencionado acima. A função de buscar vai ter que validar se o item está expirado, se não tiver devolve o atributo value, se tiver, retorna null e apaga o item do storage.

Com isso temos um cache em local storage para coisas simples como por exemplo esses dados das taxas, já que é algo que não muda toda hora e não queremos bater na API externa a todo momento.