HTML 5 – Web SessionStorage Cache + AngularJS + SpringBoot RestAPIs

In the tutorial, JavaSampleApproach will show you how to use HTML 5 – Web SessionStorage to store data locally within the user’s browser for caching purpose with AngularJs and SpringBoot RestAPI.

Related posts:
AngularJs Table display Data Objects from RestAPIs remote | SpringBoot & BootStrap
HTML 5 – Web LocalStorage Cache + AngularJS + SpringBoot RestAPIs

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– HTML 5
– AngularJS
– Bootstrap
– Spring Boot – 1.5.9.RELEASE

II. Goal

In the tutorial, We use Html 5 Web SessionStorage and AngularJs to cache data from SpringBoot RestAPI:

We build a SpringBoot project as below:

Html 5 Web SessionStorage - AngularJs + SpringBoot RestAPI - project structure

Run and check results:
– Make a first request:

Html 5 Web SessionStorage - AngularJs + SpringBoot RestAPI - results

-> It loads data from SpringBoot back-end : /api/customer/all

Html 5 Web SessionStorage - AngularJs + SpringBoot RestAPI - logs request

Html 5 Web SessionStorage - AngularJs + SpringBoot RestAPI - logs objects

-> Then store result as key/value in sessionStorage:

Html 5 Web SessionStorage - AngularJs + SpringBoot RestAPI - session storage

– Reload the url http://localhost:8080 at the current tab, the data is loaded from SessionStorage, Not from back-end server:

Html 5 Web SessionStorage - AngularJs + SpringBoot RestAPI - reload

III. Practice

Step to do:
– Create Spring Boot project
– Create data models
– Implement Web Controller
– Implement RestAPI
– Implement index view
– Implement AngularJs application

1. Create Spring Boot project

Use SpringToolSuite to create a SpringBoot project with dependencies:

2. Create data models

– Create Address model:

– Create Customer model that includes Address model:

3. Implement Web Controller

4. Implement RestAPI

5. Implement index view

6. Implement AngularJs application

IV. Sourcecode

SpringCachingWithHtml5WebSessionStorage

By JavaSampleApproach | December 1, 2017.

Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*