Data Caching with Local Storage

We created a server action with a query which returns large amounts of data. 

Open the app connect panel(1) and add app connect to your page (2).

Click add new component (1). Under state management (2), select local storage manager (3). 

Add a name for it.

Add the server connect component (1-3).

Select your server action (1-3). 

Under the data caching option, open the state manager menu in order to select where to cache the dynamic data for this server action (1). Select the local storage, which we've just created (2). Enter the time in seconds the data should be cached for. During this time, on every page reload or if using paging on changing the page, the dynamic data will be loaded from the browser's local storage which is much faster then querying the server. We enter 3600 seconds, which means that in the next 1 hour, the data will be loaded from the local storage. Then, it will be refreshed, and stored in to the cache again (3). You can add a button, which on click, can reload the data from the server, without caching. Select the button (4).

Add a new dynamic event on click (1-3).

Click the action picker button (1). And under the server connect component (2), select load (3). Enable the reload option. This way the server action will be reloaded and will get the new data from the server (4-5).

Now we will add the dynamic data on the page. We will use the dynamic table generator, but you can create any repeat or repeat children structure in order to do that. Dynamic table generator is just an example.

Deselect the button (1). Add new Text Data Bindings (2). Under Bootstrap 3 (3), select Bootstrap 3 Table Generator (4).

Click the action picker button (1).  Under data (2), we select query1 (3-4).

And we're done! Let's preview the results.

You can see that the initial loading of the data takes about 300 milliseconds, while reloading it from the local storage cache is 15 times faster - only about 20 milliseconds. That's how easy it is to use the data caching options integrated in App Connect State Management.