https://github.com/stanvanheumen/ngx-storage
A simple library that allows you use local storage in Angular 5+.
https://github.com/stanvanheumen/ngx-storage
angular angular-library angular-universal aot-compilation localstorage observables typescript
Last synced: 5 months ago
JSON representation
A simple library that allows you use local storage in Angular 5+.
- Host: GitHub
- URL: https://github.com/stanvanheumen/ngx-storage
- Owner: stanvanheumen
- License: mit
- Created: 2018-03-01T20:03:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-10T11:07:08.000Z (over 7 years ago)
- Last Synced: 2025-04-19T08:23:44.827Z (6 months ago)
- Topics: angular, angular-library, angular-universal, aot-compilation, localstorage, observables, typescript
- Language: TypeScript
- Size: 149 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# `ngx-storage`
A simple library that allows you to use local storage in Angular 5+.
- Use command + F or ctrl + F to search for a keyword.
- Contributions welcome, please see [contribution guide](.github/CONTRIBUTING.md).
## Features
- :frog: **Observable based**
- :camel: **Easy implementation**
- :mouse: **Lazy loading compatible**
- :sheep: **Angular Universal compatible**
- :panda_face: **Automatic JSON (de)serialization**
- :bird: **Ahead-Of-Time compilation compatible**
- :hamster: **Library can be consumed by Angular CLI, Webpack, or SystemJS**
## Demo
[Click here to play with the example](https://stackblitz.com/github/stanvanheumen/ngx-storage)
## Installation
To use ngx-storage in your project install it via `npm` or `yarn`:
```bash
$ npm install @stanvanheumen/ngx-storage --save
# or
$ yarn add @stanvanheumen/ngx-storage
```
## Setup
Add the `NgxStorageModule` to your imports array in your `CoreModule`.
```typescript
import {NgxStorageModule} from '@stanvanheumen/ngx-storage';
@NgModule({
imports: [NgxStorageModule]
})
export class AppModule {}
```
> Since the `StorageService` contains state it is important to only import the `NgxStorageModule` in your `CoreModule`.
## API
The `StorageService` has the following API:
#### `.get(token: string): Observable`
Returns the value associated to the specified token wrapped in an observable stream that will get updated each time the
user sets a new value in the storage.
```typescript
// For a primitive type like string, number and boolean.
const string$ = this.storage.get('my-string');
// For an advanced object or array.
const object$ = this.storage.get('my-advanced-object');
```
> The value is deserialized using the `JSON.parse()` method.
#### `.set(token: string, data: T): void`
Associates a value to the specified token.
```typescript
// For a primitive type like string, number and boolean.
this.storage.set('my-local-storage-token', 'my-new-value');
// For an advanced object or array.
this.storage.set('my-advanced-object', {name: 'Test', description: 'Lorem Ipsum'});
```
> The value is serialized using the `JSON.stringify()` method.
#### `.remove(token: string): void`
Removes the value associated to the specified token.
```typescript
this.storage.remove('my-local-storage-token');
```
#### `.clear(): void`
Removes all key-value pairs from the storage.
```typescript
this.storage.clear();
```
## Example
```typescript
import {Component, OnInit} from '@angular/core';
import {StorageService} from '@stanvanheumen/ngx-storage';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'app-root',
template: `
Current value in the local storage : {{ data$ | async | json }}
Set value to "Awesome"
Set value to "Cool"
Set value to "Hello world!"
Clear the value
`
})
export class AppComponent implements OnInit {
data$: Observable;
constructor(private storage: StorageService) {
}
ngOnInit() {
this.data$ = this.storage.get('my-local-storage-token');
}
setStorageValue(value: string) {
this.storage.set('my-local-storage-token', value);
}
removeStorageValue() {
this.storage.remove('my-local-storage-token');
}
}
```