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:

• window.localStorage – data is stored with no expiration date
• window.sessionStorage – data is stored within one session

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:

if(typeof(Storage) !== "undefined" // check Web Storage support
	&& sessionStorage.getItem("listOfCustomers") !== null){ // check listOfCustomers is cached in sessionStorage before
	
	console.log("--- Load From SessionStorage ---");
	
	// get cached listOfCustomers in sessionStorage
	var listOfCustomers = JSON.parse(sessionStorage.getItem('listOfCustomers'));
		
	...
	
	// store listOfCustomers to sessionStorage
	sessionStorage.setItem('listOfCustomers', JSON.stringify(listOfCustomers));

II. Goal

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

Run and check results:

– Make a first request:

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

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

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

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:

	org.springframework.boot
	spring-boot-starter-thymeleaf


	org.springframework.boot
	spring-boot-starter-web

2. Create data models

– Create Address model:

package com.javasampleapproach.weblocalstorage.model;
 
public class Address {
	 
	private String street;
	private String postcode;
	
	public Address(){}
	
	public Address(String street, String postcode){
		this.street = street;
		this.postcode = postcode;
	}
 
	public String getStreet() {
		return street;
	}
 
	public void setStreet(String street) {
		this.street = street;
	}
 
	public String getPostcode() {
		return postcode;
	}
 
	public void setPostcode(String postcode) {
		this.postcode = postcode;
	}
 
	@Override
	public String toString() {
		return "Address {street:" + street + ", postcode:" + postcode + "}";
	}
}

– Create Customer model that includes Address model:

package com.javasampleapproach.weblocalstorage.model;
 
public class Customer {
	private Long id;
	private String name;
	private Integer age;
	private Address address;
	
	public Customer(){}
	
	public Customer(Long id, String name, Integer age, Address address){
		this.id = id;
		this.name = name;
		this.age = age;
		this.address = address;
	}
 
	public Long getId() {
		return id;
	}
 
	public void setId(Long id) {
		this.id = id;
	}
	
	public String getName() {
		return name;
	}
 
	public void setName(String name) {
		this.name = name;
	}
 
	public Integer getAge() {
		return age;
	}
 
	public void setAge(Integer age) {
		this.age = age;
	}
 
	public Address getAddress() {
		return address;
	}
 
	public void setAddress(Address address) {
		this.address = address;
	}
 
	@Override
	public String toString() {
		return "Customer {name:" + name + ", age:" + age + ", address:" + address + "}";
	}
 
}

3. Create Web Controller to provide web views

package com.javasampleapproach.weblocalstorage.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class WebController {
 
	@GetMapping(value="/")
    public String homepage(){
        return "index";
    }
}

4. Create RestController for GET request

package com.javasampleapproach.weblocalstorage.controller;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
 
import javax.annotation.PostConstruct;
 
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import com.javasampleapproach.weblocalstorage.model.Address;
import com.javasampleapproach.weblocalstorage.model.Customer;
 
 
@RestController
@RequestMapping("/api/customer")
public class RestAPIs {
	
	Map custStores = new HashMap();
	
	@PostConstruct
    public void initIt() throws Exception {
        custStores.put(Long.valueOf(1), new Customer(new Long(1), "Jack", 25, new Address("NANTERRE CT", "77471")));
        custStores.put(Long.valueOf(2), new Customer(new Long(2), "Mary", 37, new Address("W NORMA ST", "77009")));
        custStores.put(Long.valueOf(3), new Customer(new Long(3), "Peter", 18, new Address("S NUGENT AVE", "77571")));
        custStores.put(Long.valueOf(4), new Customer(new Long(4), "Amos", 23, new Address("E NAVAHO TRL", "77449")));
        custStores.put(Long.valueOf(5), new Customer(new Long(5), "Craig", 45, new Address("AVE N", "77587")));
    }
	 
	@GetMapping(value = "/all")
	public List getResource() {
		
		List custList = custStores.entrySet().stream()
		        .map(entry -> entry.getValue())
		        .collect(Collectors.toList());
		
		return custList;
	}
}

5. Create an index.html view

 


      
      
      %MINIFYHTMLbb69af0b832b3491ee5fd70a5216bb8716%%MINIFYHTMLbb69af0b832b3491ee5fd70a5216bb8717%%MINIFYHTMLbb69af0b832b3491ee5fd70a5216bb8718%

 


	
Customer Table
		

			

				

					

						
Id
						
Name
						
Age
						
Street
						
Postcode
					
				
				

				
			
		
	
%MINIFYHTMLbb69af0b832b3491ee5fd70a5216bb8719%

6. Implement JQuery loading data

$(document).ready(function() {
	
	/**
	 * Load List of Customers then showing on Table view
	 */
	$(function loadData(){
		
		if(typeof(Storage) !== "undefined" // check Web Storage support
			&& sessionStorage.getItem("listOfCustomers") !== null){ // check listOfCustomers is cached in sessionStorage before
			
			console.log("--- Load From SessionStorage ---");
			
			// get cached listOfCustomers in sessionStorage
			var listOfCustomers = JSON.parse(sessionStorage.getItem('listOfCustomers'));
			
			// render List of Customers on view
			renderCustomersByTableView(listOfCustomers);
		}else{
			
			console.log("--- Load From Back-End service ---");
			
			$.ajax({
				type : "GET",
				url : window.location + "api/customer/all",
				
				success: function(listOfCustomers){
					
					// store listOfCustomers to sessionStorage
					sessionStorage.setItem('listOfCustomers', JSON.stringify(listOfCustomers));
					
					// render List of Customers on view
					renderCustomersByTableView(listOfCustomers);
				},
				error : function(e) {
					alert("ERROR: ", e);
					console.log("ERROR: ", e);
				}
			});
		}
		
	});
	
	/**
	 * Render List of Customers by Table view
	 */
	function renderCustomersByTableView(listOfCustomers){
		if(listOfCustomers){
			
			$.each(listOfCustomers, function(i, customer){
			
				var customerRow = '' +
									'' + customer.id + '' +
									'' + customer.name.toUpperCase() + '' +
									'' + customer.age + '' +
									'' + customer.address.street + '' +
									'' + customer.address.postcode + '' +
								  '';
				
				$('#customerTable tbody').append(customerRow);
				
	        });
			
			$( "#customerTable tbody tr:odd" ).addClass("info");
			$( "#customerTable tbody tr:even" ).addClass("success");
		}
	}
})

IV. Sourcecode

SpringBootCachingWithJQueryWebSessionStorage