Como Criei o Storagefy: Persistência Local de Estado Para Aplicações Front-End
No desenvolvimento de aplicações front-end, um dos maiores desafios é garantir que o estado da aplicação seja persistido corretamente entre recarregamentos de página e sessões do usuário. Eu enfrentei esse problema ao trabalhar em vários projetos e, por isso, decidi criar o Storagefy, uma ferramenta agnóstica de framework para sincronizar bibliotecas de gerenciamento de estado como Pinia, Redux, Zustand, e Svelte stores com mecanismos de armazenamento do navegador, como localStorage, sessionStorage e IndexedDB.
O Desafio: Persistência de Estado em Diferentes Frameworks
O primeiro obstáculo que encontrei foi a diversidade de bibliotecas de gerenciamento de estado no ecossistema JavaScript. O Redux, por exemplo, tem uma maneira bem diferente de tratar o estado quando comparado ao Pinia do Vue ou ao Zustand do React. Cada um desses frameworks tem suas próprias particularidades, e integrá-los com os mecanismos de armazenamento do navegador de forma eficiente foi um desafio interessante.
O Storagefy nasceu para resolver justamente isso. A ideia era criar uma solução agnóstica de framework, que fosse fácil de integrar com qualquer biblioteca de gerenciamento de estado e que pudesse usar diferentes adaptadores de armazenamento de forma transparente. A solução que desenvolvi oferece:
- LocalStorageAdapter: Para persistir o estado entre abas e sessões.
- SessionStorageAdapter: Para dados temporários ou sensíveis, persistidos apenas durante a sessão da aba.
- IndexedDBAdapter: Para estados grandes ou complexos, com suporte assíncrono.
Além disso, criei adaptadores para facilitar a integração com bibliotecas populares de gerenciamento de estado, como Redux, Zustand, Jotai, para React, Pinia, para Vue, e Svelte stores, permitindo que a persistência de estado seja implementada de maneira simples e direta.
Como Funciona o Storagefy
A instalação do Storagefy é rápida:
npm install storagefy
yarn add storagefy
Criptografia e Ofuscação de Dados
Para garantir a segurança dos dados armazenados no Storagefy, implementei uma camada de criptografia utilizando o algoritmo AES-GCM. Isso dificulta a leitura e o acesso direto aos dados, tornando-os protegidos mesmo que alguém tenha acesso físico ao armazenamento do navegador.
A criptografia é feita de forma simples e eficiente, utilizando uma chave AES para criptografar os objetos JavaScript. Quando os dados são armazenados, eles são transformados em uma forma codificada (base64 ou binária), dificultando seu acesso direto e a leitura por partes não autorizadas.
Essa abordagem assegura que, mesmo que os dados sejam acessados, eles não possam ser facilmente interpretados sem a chave de criptografia, protegendo a privacidade e a integridade das informações do usuário.
Desafios no Desenvolvimento
Ao desenvolver o Storagefy, enfrentei desafios técnicos, especialmente em relação à gestão de estado entre diferentes abas do navegador. Uma das principais dificuldades foi garantir que a persistência do estado não interferisse na reatividade tornando loops infinitos entre abas.
As dificuldades foram ainda mais notáveis com o React, que apresentou uma complexidade maior em comparação com o Pinia ou as Svelte Stores. A solução atualizada do Storagefy resolve isso automaticamente, atualizando os valores sempre que forem reativos. Também é possível sincronizar abas usando o sessionStorage, bastando configurar o adaptador corretamente. Ou seja, tanto o localStorage quanto o IndexedDB e o sessionStorage podem ser compartilhados entre abas, e, ao sincronizar, os valores são atualizados automaticamente no objeto da store.
Onde Encontrar o Storagefy
Você pode acessar o projeto do Storagefy no GitHub e na NPM:
Conclusão
A criação do Storagefy foi uma experiência interessante, pois me permitiu explorar diferentes técnicas de persistência de estado e, ao mesmo tempo, criar uma solução que pode ser facilmente integrada a qualquer framework. O objetivo do projeto não é apenas resolver um problema técnico, mas também proporcionar uma ferramenta útil para desenvolvedores que buscam melhorar a experiência do usuário nas suas aplicações.
Se você está lidando com persistência de estado em seu projeto no frontend, vale a pena conferir o Storagefy e considerar como ele pode ser útil para o seu caso.