In front-end application development, one of the biggest challenges is ensuring that the application state is correctly persisted across page reloads and user sessions. I encountered this problem while working on several projects, and that’s why I decided to create Storagefy, a framework-agnostic tool to synchronize state management libraries like Pinia, Redux, Zustand, and Svelte stores with browser storage mechanisms such as localStorage, sessionStorage, and IndexedDB.

The Challenge: State Persistence Across Different Frameworks

The first obstacle I encountered was the diversity of state management libraries in the JavaScript ecosystem. Redux, for example, handles state very differently compared to Pinia in Vue or Zustand in React. Each of these frameworks has its own peculiarities, and integrating them with browser storage mechanisms efficiently was an interesting challenge.

Storagefy was created to solve exactly that. The idea was to create a framework-agnostic solution that would be easy to integrate with any state management library and could use different storage adapters transparently. The solution I developed offers:

  • LocalStorageAdapter: To persist state across tabs and sessions.
  • SessionStorageAdapter: For temporary or sensitive data, persisted only during the tab session.
  • IndexedDBAdapter: For large or complex states, with asynchronous support.

In addition, I created adapters to facilitate integration with popular state management libraries such as Redux, Zustand, Jotai for React, Pinia for Vue, and Svelte stores, making state persistence easy to implement.

How Storagefy Works

Installing Storagefy is quick:

npm install storagefy

Data Encryption and Obfuscation

To ensure the security of data stored in Storagefy, I implemented an encryption layer using the AES-GCM algorithm. This makes it difficult to read or directly access the data, protecting it even if someone gains physical access to the browser storage.

The encryption is simple and efficient, using an AES key to encrypt JavaScript objects. When the data is stored, it is transformed into an encoded form (base64 or binary), making direct access and reading by unauthorized parties more difficult.

This approach ensures that even if the data is accessed, it cannot be easily interpreted without the encryption key, protecting user privacy and data integrity.

Development Challenges

While developing Storagefy, I faced technical challenges, especially with managing state across different browser tabs. One of the main difficulties was ensuring that state persistence didn’t interfere with reactivity, causing infinite loops between tabs.

The difficulties were even more noticeable with React, which presented greater complexity compared to Pinia or Svelte Stores. The updated solution in Storagefy resolves this automatically, updating values whenever they are reactive. It’s also possible to sync tabs using sessionStorage by simply configuring the adapter correctly. In other words, both localStorage, IndexedDB, and sessionStorage can be shared between tabs, and when synced, values are automatically updated in the store object.

Where to Find Storagefy

You can access the Storagefy project on GitHub and NPM:

Conclusion

Creating Storagefy was an interesting experience, as it allowed me to explore different state persistence techniques while also creating a solution that can be easily integrated into any framework. The goal of the project is not only to solve a technical problem but also to provide a useful tool for developers seeking to improve the user experience in their applications.

If you are dealing with state persistence in your front-end project, it's worth checking out Storagefy and considering how it can be useful for your case.