ReTabNews

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.