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
Contents
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:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> |
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<Long, Customer> custStores = new HashMap<Long, Customer>(); @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<Customer> getResource() { List<Customer> custList = custStores.entrySet().stream() .map(entry -> entry.getValue()) .collect(Collectors.toList()); return custList; } } |
5. Create an index.html view
<!DOCTYPE HTML> <html> <head> <title>Spring Boot - DELETE-UPDATE AJAX Example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="/js/jqueryAjaxGet.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> </head> <body> <div class="container"> <h1>Customer Table</h1> <div class="row col-md-7 table-responsive"> <table id="customerTable" class="table table-bordered table-hover"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Age</th> <th>Street</th> <th>Postcode</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </body> </html> |
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 = '<tr>' + '<td>' + customer.id + '</td>' + '<td>' + customer.name.toUpperCase() + '</td>' + '<td>' + customer.age + '</td>' + '<td>' + customer.address.street + '</td>' + '<td>' + customer.address.postcode + '</td>' + '</tr>'; $('#customerTable tbody').append(customerRow); }); $( "#customerTable tbody tr:odd" ).addClass("info"); $( "#customerTable tbody tr:even" ).addClass("success"); } } }) |