Using the Store Service

All modern browsers implement client-side storage. This allows web applications to store information in the browser for future use. The Cloud App API exposes a Store Service which enables apps to take advantage of these features of the browser.

Since all Cloud Apps are hosted from the same domain/origin, native usage of Web Storage and IndexedDB can lead to information leakage or collisions and is therefore not supported.

In this tutorial, we’ll show how to use the Store Service to save the state of a text area in our app thereby allowing users to return later to the form without losing their state.

Start by following the instructions in the “Adding additional routes” tutorial to add a new component and route called “store”. Our store.component.html form has a single text area field:

store.component.htmlView on Github

In the init function of store.component.ts, we initialize a form group with a single control for our content. Then we use the Store Service to retrieve the previous saved value and override the form group if it exists. We also subscribe to the valueChanges property of the form, using the debounceTime operator to limit the number of updates to the Store Service. Then we call the set method of the Store Service to store the value of the form.

store.component.tsView on Github

This demonstrates one possible use of the Store Service which can be extended to cover additional use cases where access to client-side storage is required.