Storage Service

The SDK operates in a stateless mode by default, meaning each get_flag call triggers a fresh evaluation of the flag against the current user context.

To optimize performance and maintain consistency, you can implement a custom storage mechanism by passing a storage parameter during initialization. This allows you to persist feature flag decisions in your preferred database system (like Redis, MongoDB, or any other data store).

Key benefits of implementing storage:

1. Improved performance by caching decisions
2. Consistent user experience across sessions
3. Reduced load on your application

The storage mechanism ensures that once a decision is made for a user, it remains consistent even if campaign settings are modified in the VWO Application. This is particularly useful for maintaining a stable user experience during A/B tests and feature rollouts.

In-Built Storage

In browser environments, the SDK automatically uses localStorage to persist user data. This means any data related to the SDK is saved in the browser’s local storageBy default, allowing it to persist across page reloads and browser sessions.

However, you can customize this behavior using the clientStorage option during SDK initialization. This option provides more control over how and where the SDK stores its data on the client side.

Usage

import { VWOProvider, IVWOOptions, IVWOContextModel, StorageConnector } from 'vwo-fme-react-sdk';

const vwoConfig: IVWOOptions = {
  sdkKey: '32-alpha-numeric-sdk-key', // Your VWO SDK Key
  accountId: '123456', // Your VWO Account ID
  logger: {
    level: 'debug', // Optional log level for debugging
  },
  clientStorage: {
    key: 'vwo_data', // Custom key used to store SDK data, default is 'vwo_fme_data'
    provider: sessionStorage, // Storage mechanism to use: can be sessionStorage or localStorage (default)
    isDisabled: false, // If true, disables client-side storage altogether
  }
};

const userContext: IVWOContextModel = {id: 'unique_user_id'};

const App = () => (
  <VWOProvider config={vwoConfig} userContext={userContext}>
    <YourComponent />
  </VWOProvider>
);

export default App;

Explanation of clientStorage Parameters

📘

Important Notes

• Browser Environment Only: The clientStorage option works exclusively in browser environments where localStorage and sessionStorage APIs are available.
• Node.js Environments: For server-side or Node.js environments, use the storage option for implementing custom storage logic, as localStorage and sessionStorage are not available there. To know more, click here.

How to Implement a StorageConnector

If you still wish to connect it to our data store, you can implement a StorageConnector.

Usage

import { VWOProvider, IVWOOptions, IVWOContextModel, StorageConnector } from 'vwo-fme-react-sdk';

class StorageConnector extends StorageConnector {
  constructor() {
    super();
  }

  /**
   * Get data from storage
   * @param {string} featureKey
   * @param {string} userId
   * @returns {Promise<any>}
   */
  async get(featureKey, userId) {
    // return await data (based on featureKey and userId)
  }

  /**
   * Set data in storage
   * @param {object} data
   */
  async set(data) {
    // Set data corresponding to a featureKey and user ID
    // Use data.featureKey and data.userId to store the above data for a specific feature and a user
  }
}

const vwoConfig: IVWOOptions = {
  sdkKey: '32-alpha-numeric-sdk-key', // Your VWO SDK Key
  accountId: '123456', // Your VWO Account ID
  logger: {
    level: 'debug', // Optional log level for debugging
  },
  storage: StorageConnector
};

const userContext: IVWOContextModel = {id: 'unique_user_id'};

const App = () => (
  <VWOProvider config={vwoConfig} userContext={userContext}>
    <YourComponent />
  </VWOProvider>
);

export default App;

Storage Service should expose two methods: get and set. These methods are used by VWO whenever there is a need to read or write from the storage service.