# Persist state plugin

Plugin is used for storing state to external storages like `localStorage` . Due its async nature it supports also storages like `IndexDB`&#x20;

To do this you need to access store either from actions either injected to component and do following:

_from actions_

```typescript
this.store.storage.save()
```

_from component_

```typescript
this.store.select(['state-to-save-path']).storage.save()
```

#### Storage API:

* **save** - saves state to storage.&#x20;
  * _`PersistStateParams` params can be passed._&#x20;
  * _Returns: `Observable<PersistStateItem>` with saved key and object_
* **load** - loads and applies state from storage (state is deleted from storage afterwards at least `keepEntry` is passed as `true`).&#x20;
  * _`PersistStateParams` params can be passed._&#x20;
  * _Returns: `Observable<PersistStateItem>` with saved key and object_
* **removeItem** - removes item from storage.&#x20;
  * `PersistStateParams` params can be passed.&#x20;
  * _Returns `Observable<string>` with key that was removed._
* **clear** - clears all state items from storage (clears items that keys starts with `state::`).&#x20;
  * _Returns `Observable<string[]>` with keys that was removed._

Each method returns observable. Subscription is optional but once subscribed it gets notified once action is completed.

_PersistStateParams:_

* custom key
* custom storage config
* custom deserialize function
* custom serialize function

#### Demo

![](https://2483127471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La0zIK2BFiXY6Eig7aR%2F-LaQfLmy6z3llFWZDr6_%2F-LaQfOhMx4896RelwXMp%2FTODOGoogleChrome3_19_20191.gif?alt=media\&token=42e7eb19-ae80-454d-aea7-30607fe6bb14)
