How to Work With Web Client Storage

A better way to work with web client storage

Photo by Artem Maltsev on Unsplash

Browsers come equipped with storage options that help you manage data on the client in order to minimize calls to the server and even provide an offline experience in your app. Some apps would even initially load data from the server and work without ever needing to call the server after.

It's not whether you need to deal with client storage options, it's when. However, when you jump into this world, some problems emerge:

• Each comes with its own APIs and some are verbose;
• Each has its data type limitations which means not all data types can be stored;
• You will likely need to fall back onto different options because not all browser types and versions support all the storage options;
• You will likely need to manage data format, validation, and type to ensure data is stored in a consistent manner to prevent app-level data checks.
• You most likely need a library to help but finding one that solves all or most of your problems is likely a hard mission.

Enters “client-web-storage” package

The “client-web-storage” is a promising solution because:

• It provides a single and simple API to deal with all client storage options: IndexedDb, WebSQL, LocalStorage, and in Memory;
• It automatically fallback to different options, guaranteeing your data will be stored on the client correctly;
• Supports a long list of data types: Date, Number, String, Boolean, Array, ArrayBuffer, Blob, Float32Array, Float64Array, Int8Array, Int16Array, Int32Array, Uint8Array, Uint8ClampedArray, Uint16Array, Uint32Array ;
• Its does basic data validation for you;
• Comes with schema support which guarantees data format. It creates fields with default values automatically for you;
• Provides hooks for your server API communication so you only interact with the data store while all API communications happen on the back;
• It offers an unbelievable simple API to do everything;
• Allows schema nesting to create complex…