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.
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:
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.
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.