|
1 | | -# localstorage Provider |
| 1 | +# LocalStorage Provider |
| 2 | + |
| 3 | +The `localStorage` provider is a great provider to use combined with other providers to allow for local overrides of feature flags. |
| 4 | +It doesn't require any infrastructure to setup or manage, and provides a simple way to allow anyone with access to the browser's developer tools to change the values of feature flags for their own experience. |
| 5 | +This could be useful for testing or debugging purposes, or as part of a minimal hidden UI in your application to allow developers, product managers, or anyone else, to self-serve their own access to features in development. |
2 | 6 |
|
3 | 7 | ## Installation |
4 | 8 |
|
5 | 9 | ``` |
6 | 10 | $ npm install @openfeature/localstorage-provider |
7 | 11 | ``` |
8 | 12 |
|
9 | | -## Building |
| 13 | +Required peer dependencies |
| 14 | + |
| 15 | +``` |
| 16 | +$ npm install @openfeature/web-sdk |
| 17 | +``` |
| 18 | + |
| 19 | +## Usage |
| 20 | + |
| 21 | +The `localStorage` provider uses the browser's `localStorage` to determine the value of a feature flag. |
| 22 | +It supports `booleans`, `strings`, `numbers` and `objects` by attempting to interpret the value of a `localStorage` entry to the requested type. |
| 23 | +The default value will be returned if there is no matching `localStorage` entry or the value can't be cast to the desired type. |
| 24 | + |
| 25 | +```typescript |
| 26 | +import { OpenFeature, MultiProvider } from '@openfeature/web-sdk'; |
| 27 | +import { LocalStorageProvider } from '@openfeature/localstorage-provider'; |
| 28 | + |
| 29 | +// Register the localStorage provider globally, combined with any other providers you may be using |
| 30 | +OpenFeature.setProvider( |
| 31 | + new MultiProvider([{ provider: new LocalStorageProvider() }, { provider: new OtherProvider() }]), |
| 32 | +); |
| 33 | +``` |
| 34 | + |
| 35 | +### Available options |
| 36 | + |
| 37 | +| Option name | Type | Default | |
| 38 | +| ----------- | ------ | -------------- | |
| 39 | +| prefix | string | 'openfeature.' | |
| 40 | + |
| 41 | +Use the `prefix` option to specify a custom prefix for `localStorage` entries. |
| 42 | +By default, the provider will look for entries that start with `openfeature.`, followed by the flag key. |
| 43 | +For example, if you have a flag with the key `new-feature`, the provider will look for a `localStorage` entry with the key `openfeature.new-feature` to determine the value of that flag. |
| 44 | +This allows you to define feature flags in `localStorage` without worrying about naming collisions with other data stored there. |
| 45 | + |
| 46 | +## Examples |
| 47 | + |
| 48 | +### Boolean example |
| 49 | + |
| 50 | +```javascript |
| 51 | +// In the browser's developer console set a localStorage entry for the flag |
| 52 | +localStorage.setItem('openfeature.enable-new-feature', 'true'); |
| 53 | +``` |
| 54 | + |
| 55 | +```typescript |
| 56 | +const client = OpenFeature.getClient(); |
| 57 | +client.getBooleanValue('enable-new-feature', false); |
| 58 | +``` |
| 59 | + |
| 60 | +### Number example |
| 61 | + |
| 62 | +```javascript |
| 63 | +// In the browser's developer console set a localStorage entry for the flag |
| 64 | +localStorage.setItem('openfeature.difficulty-multiplier', '5'); |
| 65 | +``` |
| 66 | + |
| 67 | +```typescript |
| 68 | +const client = OpenFeature.getClient(); |
| 69 | +client.getNumberValue('difficulty-multiplier', 0); |
| 70 | +``` |
| 71 | + |
| 72 | +### String example |
| 73 | + |
| 74 | +```javascript |
| 75 | +// In the browser's developer console set a localStorage entry for the flag |
| 76 | +localStorage.setItem('openfeature.welcome-message', 'yo'); |
| 77 | +``` |
| 78 | + |
| 79 | +```typescript |
| 80 | +const client = OpenFeature.getClient(); |
| 81 | +client.getStringValue('welcome-message', 'hi'); |
| 82 | +``` |
| 83 | + |
| 84 | +### Object example |
| 85 | + |
| 86 | +```javascript |
| 87 | +// In the browser's developer console set a localStorage entry for the flag |
| 88 | +localStorage.setItem('openfeature.preferred-sdk', '{"name": "openfeature"}'); |
| 89 | +``` |
| 90 | + |
| 91 | +```typescript |
| 92 | +const client = OpenFeature.getClient(); |
| 93 | +client.getObjectValue('preferred-sdk', { name: 'OpenFeature' }); |
| 94 | +``` |
| 95 | + |
| 96 | +## Development |
| 97 | + |
| 98 | +### Building |
10 | 99 |
|
11 | 100 | Run `nx package providers-localstorage` to build the library. |
12 | 101 |
|
13 | | -## Running unit tests |
| 102 | +### Running unit tests |
14 | 103 |
|
15 | 104 | Run `nx test providers-localstorage` to execute the unit tests via [Jest](https://jestjs.io). |
0 commit comments