co-browser-storage v1.1.0
co-browser-storage
Manage browser storage variables in a convenient way using Angular 2 and @ngrx/store.
Try the example
npm install
npm run build
npm start
- navigate to http://localhost:3010
Usage
npm install --save co-browser-storage
Create browser storage config file my-browser-storage-config.ts
where you specify all your browser storage variables.
export const NAMESPACE = 'myBrowserStore'
export const DEBUG_MODE = 'debugMode'
export const myBrowserStorageConfig = {
namespace: NAMESPACE,
initialState: [
// List storage variables here
{
key: DEBUG_MODE,
value: 'true',
storageType: 'localStorage',
valueType: 'text'
}
]
}
Initialize the store and provide the model
import {provideStore} from '@ngrx/store'
import {cbsReducer} from 'co-browser-storage/co-browser-storage'
import {
initialzeCbs,
getInitialCbsState,
CbsModel
} from 'co-browser-storage/co-browser-storage'
import {myBrowserStorageConfig} from './my-browser-storage-config'
initializeCbs(myBrowserStorageConfig)
bootstrap(AppCmp, [
CbsModel,
provideStore({
cbsReducer
}, {
cbsReducer: getInitialCbsState()
})
])
Using the GUI component for managing browser storage variables
import {CbsCmp} from 'co-browser-storage/co-browser-storage'
@Component({
directives: [CbsCmp],
template: `
<cbs-cmp></cbs-cmp>
`
})
export class AppComponent {}
Only show selected items in GUI
<cbs-cmp [itemsToShow]="['debugMode', 'otherItem']"></cbs-cmp>
Get value
import {CbsModel} from 'co-browser-storage/co-browser-storage'
...
let debugMode$ = cbsModel.getItemByKey('debugMode')
Or using store directly
import {Store} from '@ngrx/store'
...
let cbsReducer$ = store.select('cbsReducer')
let debugMode$ = cbsReducer$.map(cbs => cbs.find(i => i.key === 'debugMode'))
Update value
import {CbsModel} from 'co-browser-storage/co-browser-storage'
...
cbsModel.updateItem({
key: 'debugMode',
value: 'false'
})
// Multiple at once
cbsModel.updateItems([
{
key: 'debugMode',
value: 'false'
},
{
key: 'otherItem',
value: 'otherValue'
}
])
Get boolean true if value is 'true'
import {CbsModel} from 'co-browser-storage/co-browser-storage'
...
// cbsModel.truthy takes a string or an array of strings
let isDebugMode$ = cbsModel.truthy('debugMode')
Developing
- npm start
- npm run watch (typescript compilation watcher)
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago