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

In the tutorial, JavaSampleApproach will guide you how to use HTML 5 – Web LocalStorage 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
HTML 5 – Web SessionStorage + JQuery to Cache data from SpringBoot RestAPIs
Html5 DateTime + AngularJs + SpringBoot @JsonFormat example

I. HTML 5 – Web LocalStorage

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.localStorage. The data is stored as String name/value pairs. So we should convert them if needed. With Jquery, we can do as below:

II. Goal

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

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

Run and check results:
– Make a first request:

HTML 5 - Web LocalStorage - Using JQuery to Cache data from SpringBoot RestAPIs - view

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

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

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

HTML 5 - Web LocalStorage - Using JQuery to Cache data from SpringBoot RestAPIs - record cache data at local storage

– shutdown then start user’s browser again. Make the request http://localhost:8080, the web application uses caching data from localStorage to display:

HTML 5 - Web LocalStorage - Using JQuery to Cache data from SpringBoot RestAPIs - record the second request

HTML 5 - Web LocalStorage - Using JQuery to Cache data from SpringBoot RestAPIs - log consoles

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 SpringBootCachingWithJQueryWebLocalStorage with dependencies:

2. Create data models

– Create Address model:

– Create Customer 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

SpringBootCachingWithJQueryWebLocalStorage

By JavaSampleApproach | November 9, 2017.

Related Posts


Got Something To Say:

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

*