Using Local Storage Safely with TypeScript

As the Banksalad Web project scaled up, the team applied a Clean Architecture structure and unified LocalStorage under the concept of DataSource to secure type safety, sharing the case publicly. The existing approach caused problems such as loss of model instances during JSON string conversion and poor management.

BrowserStorage Abstraction Structure

To manage LocalStorage and SessionStorage in an integrated way, the team introduced the BrowserStorage class and the BrowserStorageMapper interface. BrowserStorage receives a Key and a Mapper by injection and provides save, load, and delete functionality at the Model level, and is designed so that external code communicates only through Model objects.

Ensuring Type Safety via Mapper

BrowserStorageMapper serves to connect the JSON string in LocalStorage with the Model in the Application. By implementing the fromJson and toJson methods, the contexts on both sides are separated, so the concept of JSON is not exposed inside the Model or Storage. While this approach has the downside of increasing the amount of code, it clarifies where errors occur and makes it easier to write test code, thereby improving the stability of the codebase.