SAPUI5 working with offline data using jQuery.sap.storage
HTML5 brought to us the possibility to work offline without very complex solutions. We can make websites and webapps which can work 100% offline with few effort.
There are many components and many ways to make our webapps able to work without internet connection. To store data and make it available offline, we can basically use:
HTML5 Offline Technologies
- Web Storage simply provides a key-value mapping, e.g.
localStorage["name"] = username;. Unfortunately, present implementations only support string-to-string mappings, so you need to serialise and de-serialise other data structures. You can do so using
- Web SQL Database gives you all the power – and effort – of a structured SQL relational database.
- Indexed Database is somewhere in between Web Storage and Web SQL Database. Like Web Storage, it’s a straightforward key-value mapping, but it supports indexes like those of relational databases, so searching objects matching a particular field is fast; you don’t have to manually iterate through every object in the store.
In the SAPUI5 framework we have a component which manipulates the HTML5 Web Storage object. This component is jQuery.sap.storage and is this one that I’m going to show you how to use.
Why this one?
- It’s simple to understand and to use;
- It’s the only one which can be manipulated straight with SAPUI5;
- It’s supported for all modern browsers;
- It’s perfect to use with JSONModel, you can store all your Model in one entry.
Check the API for jQuery.sap.storage here:
I won’t explain the HTML5 Web Storage object in details, for further information go through the links below:
For now, we just need to know that the limit for Web Storage is 5 MB, data is stored as string in name/value pairs and there are two types of Storage:
- Local Storage – stores data with no expiration date, you can close the browser and data still there (jQuery.sap.storage.Type.local in UI5);
- Session Storage – stores data for one session, if you close the browser (or tab) data is lost (jQuery.sap.storage.Type.session in UI5).
These are the main methods for Web Storage in UI5.
//Get Storage object to use oStorage = jQuery.sap.storage(jQuery.sap.storage.Type.local); //Get data from Storage oStorage.get("myLocalData"); //Set data into Storage oStorage.put("myLocalData", oData); //Clear Storage oStorage.clear();
Here you can check an application using jQuery.sap.storage.
When you access the app for the first time there is nothing into Local Storage area and it’s shown just one item on screen.
This item come from a variable (var data) defined in the app.
After to press the “Add” button, we have one more item on screen and now we have our first entry into Local Storage Area.
After have pressed the “Add” button more few times, I refreshed the page (CTRL+F5) and the Model was filled with data from the previous Local Storage entry.
You can do more, a lot more. This is just the first step with offline data in UI5 apps.
How I said at the beginning, you can use many others approaches to make your data offline.
For a full offline experience, you should use Appcache. It isn’t a SAPUI5 component, it’s an HTML5 object.
There are few blogs about it here and lots of pages out there. You can check the links below.