+ ngx-localstorage
+ +
+ An Angular wrapper for localstorage/sessionstorage access
+
+ [![NPM][npm-shield]][npm-url]
+ [![License][license-shield]][license-url]
+ [![Release Workflow Status][build-shield]][build-url]
+
-
-[](https://www.npmjs.com/package/ngx-localstorage)
+
+
+ An Angular wrapper for localstorage/sessionstorage access
+
+ [![NPM][npm-shield]][npm-url]
+ [![License][license-shield]][license-url]
+ [![Release Workflow Status][build-shield]][build-url]
+
Import symbols from ngx-localstorage
LocalStorageService
-
-Provides a service to access the localstorage.
- -| Name | -Description | -
|---|---|
- |
- Configuration used by the service. - |
-
| clear - | -|
|---|---|
|
- Clears all entries of the applications local storage. - - |
-
| count - | -|
|---|---|
|
- Gets the number of entries in the applications storage. - - |
- |
| Returns | -|
- number | undefined
- |
-
- - - - |
-
| error - | -|
|---|---|
|
- Triggers the service to emit the given error. - - |
- |
| Parameters | -|
|
- - error -unknown
- |
-
-
-
- Error to emit through the service. - - |
-
| get - | -|
|---|---|
|
- Gets the entry specified by the given key if existing - otherwise |
- |
| Parameters | -|
|
- - key -string
- |
-
-
-
- Key identifying the wanted entry. - - |
-
|
- - options? -ServiceOptions
- |
-
-
-
- Options for overwriting configuration with the following properties: -
|
-
| Returns | -|
- T | null | undefined
- |
-
- - - - |
-
| getKey - | -|
|---|---|
|
- Returns the nth (defined by the index parameter) key in the storage. -The order of keys is user-agent defined, so you should not rely on it. - - |
- |
| Parameters | -|
|
- - index -number
- |
-
-
-
- An integer representing the number of the key you want to get the name of. This is a zero-based index. - - |
-
| Returns | -|
- string | null | undefined
- |
-
- - - - |
-
| remove - | -|
|---|---|
|
- Removes the entry specified by the given key. - - |
- |
| Parameters | -|
|
- - key -string
- |
-
-
-
- Key identifying the entry to remove. - - |
-
|
- - prefix? -string
- |
-
-
-
- Optional prefix to overwrite the configured one. - - |
-
| set - | -|
|---|---|
|
- Adds the value with the given key or updates an existing entry. - - |
- |
| Parameters | -|
|
- - key -string
- |
-
-
-
- Key identifying the wanted entry. - - |
-
|
- - value -T
- |
-
-
-
- Value to store. - - |
-
|
- - options? -ServiceOptions
- |
-
-
-
- Options for overwriting configuration with the following properties: -
|
-
LocalStorageDirective
-
-Provide a directive to directly interact with stored values.
- -- Selector: - - [ngxLocalStorage] - -
- Standalone: - true -
| Name | -Description | -
|---|---|
- @Input()
- |
- An optional transformer to handle falsy values. - |
-
- @Input()
- |
- The event to hook onto value changes. - |
-
- @Input()
- |
- Flag if the bound elements value should be initialized from storage. - |
-
@Input('ngxLocalStorage')
-
- |
- The key to use with localstorage. - |
-
- @Input()
- |
- The keys prefix to use. - |
-
- @Input()
- |
- An optional debounce for storage write access after value changes. - |
-
- @Input()
- |
- Provides a path to access the bound elements value property. - |
-
- @Output()
- |
- Event which gets fired when a bound value got stored. - |
-
NgxLocalstorageConfiguration
-Provides the configuration used by the service and directive.
-| Name | -Description | -
|---|---|
- |
- Determines if null | 'null' values should be stored. (Default: true) - |
-
- |
- Determines the delimiter, will used befoure key. (Default: _) - |
-
- |
- Determines the key prefix. (Default: null) - |
-
- |
- Determines the storage type. (Default: localStorage) - |
-
StorageSerializer
-Defines the librarys serializer.
-| deserialize - | -|
|---|---|
|
- Deserializes a stored value. - - |
- |
| Parameters | -|
|
- - storedValue -string
- |
-
-
-
- stored value - - |
-
| Returns | -|
- T
- |
-
- - - - |
-
| serialize - | -|
|---|---|
|
- Prepares the value to be stored as its string representation. - - |
- |
| Parameters | -|
|
- - value -T
- |
-
-
-
- Value to be serialized - - |
-
| Returns | -|
- string
- |
-
- - - - |
-
provideNgxLocalstorage
-Provides the basic configuration and optional additional features.
-
-const provideNgxLocalstorage: (configuration?: NgxLocalstorageConfiguration, ...features: SerializerFeature[]) => EnvironmentProviders;
-
-withSerializer
-Provides a custom serializer.
-
-const withSerializer: (serializer: Type<StorageSerializer>) => SerializerFeature;
-
-NGX_LOCAL_STORAGE_CONFIG
-Provides an injection token for the service configuration.
-
-const NGX_LOCAL_STORAGE_CONFIG: InjectionToken<NgxLocalstorageConfiguration>;
-
-STORAGE_SUPPORT
-Provides information if choosen stoarge is available.
-
-const STORAGE_SUPPORT: InjectionToken<boolean>;
-
-NGX_LOCAL_STORAGE_SERIALIZER
-Provides an injection token for the services serializer.
-
-const NGX_LOCAL_STORAGE_SERIALIZER: InjectionToken<StorageSerializer>;
-
-Using the 'ngxLocalStorage' directive you can bind template controls to localstorage values.
- -Result
- - - - -Binding a Checkbox
+ + +Binding a text Input
+ + +Binding a Checkbox
+ + +Binding a text Input
+ + +Subscribe to the `LocalStorageService` to receive storage updates.
- -Result (modify text or checkbox in another tab or in Chrome DevTools)
- -{ "key": "{{ e.key }}"; "oldValue": "{{ e.oldValue }}"; "newValue": "{{ e.newValue }}" }
-Try modifying the controls from the Directive demo in another browser tab.
+ @for (event of events | async; track $index) { +
+
+ Key: {{ event.key | json }}
+ NewValue {{ event.newValue | json }}
+ OldValue {{ event.oldValue | json }}
+
+
+ }
+{{ storedObject | json }}The service can be utilized to communicate with the storage.
- -Result
- - -The library is fully lazy-/feature-module capable.
- -Result
- - -