HTML 5 – Web SessionStorage + JQuery to Cache data from SpringBoot RestAPIs

In the past post, we had practiced with HTML 5 Web LocalStorage. Today, JavaSampleApproach will show you how to use HTML 5 – Web SessionStorage to store data locally within the user’s browser for caching purpose with JQuery and SpringBoot RestAPI.

Related posts:
JQuery uses Bootstrap Table to display data from SpringBoot RestAPI
Use HTML 5 – Web LocalStorage + JQuery to Cache data from SpringBoot RestAPIs

I. HTML 5 – Web SessionStorage

With HTML 5 – Web LocalStorage, web applications can store data locally in browser. Unlike cookies, the storage limit is far larger (at least 5MB). HTML web storage provides two objects:

In the tutorial, we practice with window.sessionStorage. The data is stored as String name/value pairs. So we should convert them if needed. The data is stored for only one session and the data will be deleted when the specific working browser tab is closed.

With Jquery, we can do as below:

II. Goal

In the tutorial, we build a SpringBoot project as below:

HTML 5 - Web SessionStorage - Using JQuery to Cache data from SpringBoot RestAPIs - project structure

Run and check results:

– Make a first request:

HTML 5 - Web SessionStorage - Using JQuery to Cache data from SpringBoot RestAPIs - results

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

HTML 5 - Web SessionStorage - Using JQuery to Cache data from SpringBoot RestAPIs - record request

HTML 5 - Web SessionStorage - Using JQuery to Cache data from SpringBoot RestAPIs - firstload logs

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

HTML 5 - Web SessionStorage - Using JQuery to Cache data from SpringBoot RestAPIs - 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 - Using JQuery to Cache data from SpringBoot RestAPIs - second load logs

HTML 5 - Web SessionStorage - Using JQuery to Cache data from SpringBoot RestAPIs - record reload request

III. Practice

Step to do:
– Create Spring Boot project
– Create data models
– Create Web Controller to provide web views
– Create RestController for GET request
– Create an index.html view
– Implement JQuery loading data

1. Create Spring Boot project

Use SpringToolSuite to create a SpringBoot project SpringBootCachingWithJQueryWebSessionStorage with dependencies:

2. Create data models

– Create Address model:

– Create Customer model that includes Address model:

3. Create Web Controller to provide web views

4. Create RestController for GET request

5. Create an index.html view

6. Implement JQuery loading data

IV. Sourcecode

SpringBootCachingWithJQueryWebSessionStorage

By grokonez | November 10, 2017.



Related Posts


Got Something To Say:

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

*