# Persist state plugin

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

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. 
  * *`PersistStateParams` params can be passed.* 
  * *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)